faion-frontend-developer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Entry point:
/faion-net
— invoke this skill for automatic routing to the appropriate domain.

入口点：
/faion-net
— 调用此skill以自动路由到相应领域。

Frontend Developer Skill

前端开发Skill

Frontend development specializing in styling, UI libraries, design systems, and modern frontend patterns.

前端开发专注于样式设计、UI组件库、设计系统和现代前端模式。

Purpose

用途

Handles frontend styling, design systems, UI component libraries, accessibility, PWA, and responsive design.

负责前端样式、设计系统、UI组件库、无障碍访问、PWA以及响应式设计相关工作。

Context Discovery

上下文探查

Auto-Investigation

自动探查

Detect frontend styling setup:

Signal	How to Check	What It Tells Us
`tailwind.config.*`	`Glob("*/tailwind.config.")`	Tailwind CSS used
`styled-components`	`Grep("styled-components", "package.json")`	Styled Components
`emotion`	`Grep("@emotion", "package.json")`	Emotion CSS-in-JS
`shadcn` components	`Glob("*/components/ui/.tsx")`	shadcn/ui used
`.storybook/`	`Glob("*/.storybook/")`	Storybook setup
Design tokens	`Glob("*/tokens.")`	Design system exists
PWA manifest	`Glob("**/manifest.json")`	PWA configured

Read existing patterns:

tailwind.config for theme/tokens
Existing components for styling patterns
Storybook stories for component API

检测前端样式配置：

信号	检查方式	说明
`tailwind.config.*`	`Glob("*/tailwind.config.")`	使用了Tailwind CSS
`styled-components`	`Grep("styled-components", "package.json")`	使用了Styled Components
`emotion`	`Grep("@emotion", "package.json")`	使用了Emotion CSS-in-JS
`shadcn` components	`Glob("*/components/ui/.tsx")`	使用了shadcn/ui
`.storybook/`	`Glob("*/.storybook/")`	已配置Storybook
Design tokens	`Glob("*/tokens.")`	存在设计系统
PWA manifest	`Glob("**/manifest.json")`	已配置PWA

读取现有模式：

tailwind.config中的主题/令牌配置
现有组件的样式模式
Storybook示例中的组件API

Discovery Questions

探查问题

Q1: Styling Approach

Q1: 样式方案

yaml

question: "What styling approach are you using?"
header: "Styling"
multiSelect: false
options:
  - label: "Tailwind CSS"
    description: "Utility-first CSS framework"
  - label: "CSS-in-JS (Styled Components, Emotion)"
    description: "JavaScript-based styling"
  - label: "CSS Modules"
    description: "Scoped CSS files"
  - label: "Plain CSS/SCSS"
    description: "Traditional stylesheets"
  - label: "Not decided / recommend"
    description: "I'll suggest based on project"

yaml

question: "What styling approach are you using?"
header: "Styling"
multiSelect: false
options:
  - label: "Tailwind CSS"
    description: "Utility-first CSS framework"
  - label: "CSS-in-JS (Styled Components, Emotion)"
    description: "JavaScript-based styling"
  - label: "CSS Modules"
    description: "Scoped CSS files"
  - label: "Plain CSS/SCSS"
    description: "Traditional stylesheets"
  - label: "Not decided / recommend"
    description: "I'll suggest based on project"

Q2: UI Component Library

Q2: UI组件库

yaml

question: "Are you using a UI component library?"
header: "UI Lib"
multiSelect: false
options:
  - label: "shadcn/ui"
    description: "Copy-paste Radix-based components"
  - label: "Material UI"
    description: "Google Material Design"
  - label: "Chakra UI"
    description: "Accessible component library"
  - label: "Custom components"
    description: "Building from scratch"
  - label: "None yet"
    description: "Need recommendation"

yaml

question: "Are you using a UI component library?"
header: "UI Lib"
multiSelect: false
options:
  - label: "shadcn/ui"
    description: "Copy-paste Radix-based components"
  - label: "Material UI"
    description: "Google Material Design"
  - label: "Chakra UI"
    description: "Accessible component library"
  - label: "Custom components"
    description: "Building from scratch"
  - label: "None yet"
    description: "Need recommendation"

Q3: Design System Status

Q3: 设计系统状态

yaml

question: "Do you have a design system?"
header: "Design"
multiSelect: false
options:
  - label: "Yes, with design tokens"
    description: "Colors, spacing, typography defined"
  - label: "Figma designs exist"
    description: "Designs to implement"
  - label: "No formal system"
    description: "Ad-hoc styling"
  - label: "Need to create one"
    description: "Want to establish system"

yaml

question: "Do you have a design system?"
header: "Design"
multiSelect: false
options:
  - label: "Yes, with design tokens"
    description: "Colors, spacing, typography defined"
  - label: "Figma designs exist"
    description: "Designs to implement"
  - label: "No formal system"
    description: "Ad-hoc styling"
  - label: "Need to create one"
    description: "Want to establish system"

Q4: Accessibility Requirements

Q4: 无障碍访问要求

yaml

question: "What are your accessibility requirements?"
header: "A11y"
multiSelect: false
options:
  - label: "WCAG 2.1 AA compliance"
    description: "Standard accessibility"
  - label: "WCAG 2.1 AAA compliance"
    description: "Highest accessibility"
  - label: "Basic accessibility"
    description: "Semantic HTML, keyboard nav"
  - label: "Not a priority yet"
    description: "Focus on functionality first"

yaml

question: "What are your accessibility requirements?"
header: "A11y"
multiSelect: false
options:
  - label: "WCAG 2.1 AA compliance"
    description: "Standard accessibility"
  - label: "WCAG 2.1 AAA compliance"
    description: "Highest accessibility"
  - label: "Basic accessibility"
    description: "Semantic HTML, keyboard nav"
  - label: "Not a priority yet"
    description: "Focus on functionality first"

When to Use

适用场景

Tailwind CSS styling and architecture
Design tokens and design systems
CSS-in-JS patterns
UI component libraries (shadcn/ui, etc.)
Progressive Web Apps (PWA)
Responsive and mobile design
Accessibility (a11y)
SEO for SPAs
Storybook component development

Tailwind CSS样式设计与架构
设计令牌与设计系统
CSS-in-JS模式
UI组件库（如shadcn/ui等）
渐进式Web应用（PWA）
响应式与移动端设计
无障碍访问（a11y）
单页面应用SEO
Storybook组件开发

Methodologies

方法论

Category	Methodology	File
Tailwind CSS
Tailwind basics	Setup, utilities, responsive design	tailwind.md
Tailwind architecture	Component organization, theme config	tailwind-architecture.md
Tailwind patterns	Best practices, patterns, plugins	tailwind-patterns.md
CSS-in-JS
CSS-in-JS basics	Styled components, emotion basics	css-in-js-basics.md
CSS-in-JS advanced	Theme, SSR, performance	css-in-js-advanced.md
Design Systems
Design tokens basics	Token structure, naming conventions	design-tokens-basics.md
Design tokens implementation	Token generation, tooling	design-tokens-implementation.md
UI Libraries
shadcn/ui	Component setup and usage	shadcn-ui.md
shadcn/ui architecture	Project structure, customization	shadcn-ui-architecture.md
UI lib basics	Component library patterns	ui-lib-basics.md
UI lib patterns	Advanced component patterns	ui-lib-patterns.md
Storybook setup	Storybook configuration, stories	storybook-setup.md
Responsive & Mobile
Mobile responsive	Responsive design, breakpoints	mobile-responsive.md
PWA
PWA core	Service workers, caching, offline	pwa-core.md
PWA advanced	Push notifications, sync, install	pwa-advanced.md
SEO & Accessibility
SEO for SPAs	SSR, meta tags, structured data	seo-for-spas.md
Accessibility	ARIA, keyboard nav, screen readers	accessibility.md
Frontend Design
Frontend design	UI/UX implementation patterns	frontend-design.md

分类	方法论	文件
Tailwind CSS
Tailwind基础	配置、工具类、响应式设计	tailwind.md
Tailwind架构	组件组织、主题配置	tailwind-architecture.md
Tailwind模式	最佳实践、模式、插件	tailwind-patterns.md
CSS-in-JS
CSS-in-JS基础	Styled Components、Emotion基础	css-in-js-basics.md
CSS-in-JS进阶	主题、SSR、性能	css-in-js-advanced.md
设计系统
设计令牌基础	令牌结构、命名规范	design-tokens-basics.md
设计令牌实现	令牌生成、工具链	design-tokens-implementation.md
UI组件库
shadcn/ui	组件配置与使用	shadcn-ui.md
shadcn/ui架构	项目结构、自定义	shadcn-ui-architecture.md
UI组件库基础	组件库模式	ui-lib-basics.md
UI组件库模式	高级组件模式	ui-lib-patterns.md
Storybook配置	Storybook设置、示例	storybook-setup.md
响应式与移动端
移动端响应式	响应式设计、断点	mobile-responsive.md
PWA
PWA核心	服务工作线程、缓存、离线功能	pwa-core.md
PWA进阶	推送通知、同步、安装	pwa-advanced.md
SEO与无障碍访问
单页面应用SEO	SSR、元标签、结构化数据	seo-for-spas.md
无障碍访问	ARIA、键盘导航、屏幕阅读器	accessibility.md
前端设计
前端设计	UI/UX实现模式	frontend-design.md

Tools

工具

Styling: Tailwind CSS, CSS-in-JS (styled-components, emotion)
Design tokens: Style Dictionary, Figma Tokens
UI libraries: shadcn/ui, Radix UI, Headless UI
Storybook: Component development and documentation
Accessibility: axe-core, WAVE, Lighthouse

样式设计： Tailwind CSS、CSS-in-JS（styled-components、emotion）
设计令牌： Style Dictionary、Figma Tokens
UI组件库： shadcn/ui、Radix UI、Headless UI
Storybook： 组件开发与文档
无障碍访问： axe-core、WAVE、Lighthouse

Related Sub-Skills

Sub-skill	Relationship
faion-javascript-developer	React components, Next.js
faion-ux-ui-designer	Design specs and mockups
faion-devtools-developer	Build tools, bundlers

子Skill	关联关系
faion-javascript-developer	React组件、Next.js
faion-ux-ui-designer	设计规范与原型
faion-devtools-developer	构建工具、打包器

Integration

集成

Invoked by parent skill

faion-software-developer

for frontend styling and UI work.

faion-frontend-developer v1.0 | 18 methodologies

由父Skill

faion-software-developer

调用，负责前端样式与UI相关工作。

faion-frontend-developer v1.0 | 18种方法论

faion-frontend-developer

Original

Translation

Frontend Developer Skill

前端开发Skill

Purpose

用途

Context Discovery

上下文探查

Auto-Investigation

自动探查

Discovery Questions

探查问题

Q1: Styling Approach

Q1: 样式方案

Q2: UI Component Library

Q2: UI组件库

Q3: Design System Status

Q3: 设计系统状态

Q4: Accessibility Requirements

Q4: 无障碍访问要求

When to Use

适用场景

Methodologies

方法论

Tools

工具

Related Sub-Skills

相关子Skill

Integration

集成