Claude-skill-registry faion-frontend-developer

Frontend: Tailwind, CSS-in-JS, design tokens, UI libraries, PWA, accessibility.

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/faion-frontend-developer" ~/.claude/skills/majiayu000-claude-skill-registry-faion-frontend-developer && rm -rf "$T"

manifest: skills/data/faion-frontend-developer/SKILL.md

source content

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

Frontend Developer Skill

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

Purpose

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

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

Discovery Questions

Q1: Styling Approach

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

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

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

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

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

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

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

Integration

Invoked by parent skill

faion-software-developer

for frontend styling and UI work.

faion-frontend-developer v1.0 | 18 methodologies