HotSkill
Claude Code Frontend skills :)
Flowy lists 80 skills in the Frontend category for Claude Code, across 7 plugins. A skill is a folder of instructions an agent loads while you work. Every one here shows what is inside before you install, who wrote it, and whether it is Auto-invoked, meaning a FLOW.md router fires it as you prompt.
HotSkill
HotSkill
HotSkill
HotSkill
HotSkill
Skill
Skill
Skill
antfu
Anthony Fu's opinionated tooling and conventions for JavaScript/TypeScript projects. Use when setting up new projects, configuring ESLint/Prettier…
@antfuView SkillSkill
antfu-design
antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read,…
@antfuView SkillSkill
nitro
Nitro is the framework-agnostic server toolkit (powering Nuxt) for building and deploying web servers anywhere. Use when working with nitro.config, server…
@antfuView SkillSkill
8-bit-pixel-art-patter…
Create pixelated borders, shadows, and effects for 8-bit retro components. Apply when building 8-bit styled UI components that need authentic pixel art…
@theorcdevView SkillSkill
8bit-docs-patterns
Create documentation with gaming-specific examples, retro styling, and 8-bit terminology. Apply when documenting gaming blocks, RPG components, or retro-styled…
@theorcdevView SkillSkill
animation-performance-…
Optimize 8-bit animations for smooth performance. Apply when creating animated pixel art, game UI effects, or any retro-styled animations.
@theorcdevView SkillSkill
swiftui-design-skill
SwiftUI frontend visual design skill. Creates beautiful, distinctive iOS/macOS interfaces that avoid generic AI slop patterns. Covers design direction, layout…
@wholiverView SkillSkill
Skill
HotSkill
HotSkill
HotSkill
HotSkill
HotSkill
Skill
nuxt
Nuxt full-stack Vue framework with SSR, auto-imports, and file-based routing. Use when working with Nuxt apps, server routes, useFetch, middleware, or hybrid…
@antfuView SkillSkill
pinia
Pinia official Vue state management library, type-safe and extensible. Use when defining stores, working with state/getters/actions, or implementing store…
@antfuView SkillSkill
pnpm
Node.js package manager with strict dependency resolution. Use when running pnpm specific commands, configuring workspaces via pnpm-workspace.yaml, or managing…
@antfuView SkillSkill
bundle-barrel-imports
Import directly from source files instead of barrel files. Apply when using libraries like lucide-react, @mui/material, or @radix-ui/react-* to reduce bundle…
@theorcdevView SkillSkill
bundle-dynamic-imports
Use next/dynamic for lazy-loading heavy components. Apply when importing large components like editors, charts, or rich text editors that aren't needed on…
@theorcdevView SkillSkill
component-wrapper-arch…
Best practices for wrapping shadcn/ui components. Apply when creating 8-bit styled variants of existing shadcn/ui components.
@theorcdevView SkillHotSkill
HotSkill
HotSkill
Skill
slidev
Create and present web-based slidedecks for developers using Slidev with Markdown, Vue components, code highlighting, animations, and interactive features. Use…
@antfuView SkillSkill
tsdown
Bundle TypeScript and JavaScript libraries with blazing-fast speed powered by Rolldown. Use when building libraries, generating type declarations, bundling for…
@antfuView SkillSkill
turborepo
Turborepo monorepo build system guidance. Triggers on: turbo.json, task pipelines, dependsOn, caching, remote cache, the "turbo" CLI, --filter, --affected, CI…
@antfuView SkillSkill
fumadocs-component-doc…
Create component documentation with installation, usage examples, and preview sections. Apply when documenting 8-bit components with proper structure and…
@theorcdevView SkillSkill
fumadocs-mdx-structure
Create MDX documentation files with proper frontmatter, imports, and component integration. Apply when creating or updating Fumadocs documentation pages in…
@theorcdevView SkillSkill
fumadocs-registry-inte…
Register 8-bit components in registry.json for shadcn/ui add command. Apply when adding new components to the component library distribution.
@theorcdevView SkillHotSkill
HotSkill
HotSkill
Skill
unocss
UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind,…
@antfuView SkillSkill
vite
Vite build tool configuration, plugin API, SSR, and Vite 8 Rolldown migration. Use when working with Vite projects, vite.config.ts, Vite plugins, or building…
@antfuView SkillSkill
vitepress
VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components.
@antfuView SkillSkill
gaming-ui-state-manage…
Patterns for game-like interfaces - health bars, XP bars, mana bars. Apply when building RPG/retro gaming UI components with state-driven visuals.
@theorcdevView SkillSkill
js-early-exit
Use early returns to avoid unnecessary computation in loops and functions. Apply when processing arrays, validating input, or checking multiple conditions…
@theorcdevView SkillSkill
js-hoist-regexp
Hoist RegExp creation outside render or memoize with useMemo(). Apply when using regular expressions in React components or frequently called functions.
@theorcdevView SkillHotSkill
HotSkill
HotSkill
Skill
vitest
Vitest fast unit testing framework powered by Vite with Jest-compatible API. Use when writing tests, mocking, configuring coverage, or working with test…
@antfuView SkillSkill
vue
Vue 3 Composition API, script setup macros, reactivity system, and built-in components. Use when writing Vue SFCs, defineProps/defineEmits/defineModel,…
@antfuView SkillSkill
vue-best-practices
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar,…
@antfuView SkillSkill
js-set-map-lookups
Use Set and Map for O(1) membership lookups instead of array.includes(). Apply when checking membership repeatedly or performing frequent lookups against a…
@theorcdevView SkillSkill
js-tosorted-immutable
Use toSorted() instead of sort() to avoid mutating arrays. Apply when sorting arrays that are React props, state, or otherwise shared/referenced elsewhere.
@theorcdevView SkillSkill
registry-component-pat…
Register components in registry.json for shadcn/ui add command. Apply when adding new 8-bit components to the component library.
@theorcdevView SkillHotSkill
HotSkill
HotSkill
Skill
vue-router-best-practi…
Vue Router 4 patterns, navigation guards, route params, and route-component lifecycle interactions.
@antfuView SkillSkill
vue-testing-best-pract…
Use for Vue.js testing. Covers Vitest, Vue Test Utils, component testing, mocking, testing patterns, and Playwright for E2E testing.
@antfuView SkillSkill
vueuse-functions
Apply VueUse composables where appropriate to build concise, maintainable Vue.js / Nuxt features.
@antfuView SkillSkill
rendering-animate-svg
Wrap animated SVG elements in a div to enable hardware acceleration. Apply when animating SVG icons or elements, especially in 8-bit retro components with…
@theorcdevView SkillSkill
rendering-conditional-…
Use explicit ternary operators instead of && for conditional rendering. Apply when rendering values that could be 0, NaN, or other falsy values that might…
@theorcdevView SkillSkill
rendering-hoist-jsx
Extract static JSX elements outside components to avoid re-creation on every render. Apply when rendering static elements repeatedly or in lists.
@theorcdevView SkillHotSkill
HotSkill
HotSkill
Skill
web-design-guidelines
Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site…
@antfuView SkillSkill
rerender-functional-se…
Use functional setState updates to prevent stale closures and unnecessary callback recreations. Apply when updating state based on the current state value in…
@theorcdevView SkillSkill
rerender-lazy-state
Use lazy state initialization with useState function form. Apply when computing expensive initial values like building search indexes, parsing JSON, or complex…
@theorcdevView SkillSkill
rerender-memo
Extract expensive work into memoized components with React.memo. Apply when components perform expensive computations that can be skipped when props haven't…
@theorcdevView SkillHotSkill
HotSkill
HotSkill
Skill
retro-css-architecture
Organize 8-bit CSS with custom properties, pixel fonts, and responsive pixel art. Apply when creating or modifying retro-styled components and their CSS.
@theorcdevView SkillSkill
shadcn-ui-conventions
UI component conventions for 8-bit styled components. Use when working with shadcn/ui components or implementing retro-styled UI elements.
@theorcdevView SkillHotSkill
HotSkill
HotSkill
HotSkill