Faion Frontend Developer

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:

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

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

Integration

Invoked by parent skill faion-software-developer for frontend styling and UI work.

faion-frontend-developer v1.0 | 18 methodologies