Loading...
Loading...
Frontend: Tailwind, CSS-in-JS, design tokens, UI libraries, PWA, accessibility.
npx skill4agent add faionfaion/faion-network faion-frontend-developerEntry point:— invoke this skill for automatic routing to the appropriate domain./faion-net
| Signal | How to Check | What It Tells Us |
|---|---|---|
| | Tailwind CSS used |
| | Styled Components |
| | Emotion CSS-in-JS |
| | shadcn/ui used |
| | Storybook setup |
| Design tokens | | Design system exists |
| PWA manifest | | PWA configured |
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"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"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"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"| 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 |
| Sub-skill | Relationship |
|---|---|
| faion-javascript-developer | React components, Next.js |
| faion-ux-ui-designer | Design specs and mockups |
| faion-devtools-developer | Build tools, bundlers |
faion-software-developer