10 min read
Frontend and Design Skills
Frontend and design skills route UI work through taste, component sources, animation systems, accessibility, and browser proof. Source: Skill Registry, 2026-11-02
When To Use This
Use this family for UI, product design, motion, component sourcing, WebGL/WebXR, mobile polish, accessibility-adjacent design, and frontend taste.
Core Model
Executable behavior lives in skills/**/SKILL.md. This page owns family-level routing, tradeoffs, and failure modes. Exhaustive inventory lives in Skill Registry. Full retired article bodies live in Retired Skill Article Ledger.
Concept Position
| Axis | Value |
|---|---|
| Family | Generated skill-family synthesis |
| Concept owned | Frontend and design skills route UI work through taste, component sources, animation systems, accessibility, and browser proof. |
| Operationalizes into | Skill Registry, Skill Resolver, executable SKILL.md source |
| Use this page when | choosing the right skill family before loading executable source |
Decision Matrix
| Need | Route |
|---|---|
| Choose the design/taste route before implementation. | Load the named SKILL.md from Skill Registry and use this page for context. |
| Use component-source skills before hand-rolling common UI. | Load the named SKILL.md from Skill Registry and use this page for context. |
| Use browser proof routes after visual changes. | Load the named SKILL.md from Skill Registry and use this page for context. |
Do Not Confuse
- Rendered QA belongs in browser-testing-skills.
- Backend service facts belong in cloud-data-service-skills.
- Long-form writing belongs in writing-content-skills.
Tool And Skill Routing
| Skill | Category | Origin | Executable source | Trigger signal |
|---|---|---|---|---|
| accessibility | engineering | personal | skills/engineering/accessibility/SKILL.md | Audit and improve web accessibility following WCAG 2.2 guidelines. Use when asked to "improve accessibility", "a11y audit", "WCAG compliance", "screen reader support", "keyboard navigatio... |
| animated-component-libraries | engineering | personal | skills/engineering/animated-component-libraries/SKILL.md | Route React and Tailwind UI work to the best existing source before hand-crafting: shadcn/ui, Radix, Base UI, Magic UI, React Bits, Origin UI, Sonner, Kokonut, Toolcraft. Use for componen... |
| animejs | engineering | personal | skills/engineering/animejs/SKILL.md | Animate DOM, CSS, SVG and JavaScript objects with Anime.js: timelines, staggers, keyframes, SVG path animation and morphing. Use when building choreographed or SVG-heavy animation, or as... |
| app-onboarding-questionnaire | engineering | personal | skills/engineering/app-onboarding-questionnaire/SKILL.md | Design and build questionnaire-style app onboarding modelled on Headspace, Noom and Duolingo. Use when building onboarding flows, sign-up questionnaires, first-run experiences, paywall fl... |
| barba-js | engineering | personal | skills/engineering/barba-js/SKILL.md | Add fluid page transitions with Barba.js: SPA-like route changes, views, transition hooks and GSAP integration. Use when implementing animated navigation between website pages. |
| better-accessibility | engineering | unknown | skills/engineering/better-accessibility/SKILL.md | Reviews and fixes keyboard and focus behavior, ARIA, accessible names, forms, screen-reader announcements, motion and zoom against WCAG 2.2. Use when building or auditing a UI for accessi... |
| copilotkit | engineering | personal | skills/engineering/copilotkit/SKILL.md | Build or audit CopilotKit, AG-UI and Open Tag agent-frontend integrations. Use when the user mentions CopilotKit, AG-UI, Open Tag, generative UI, human-in-the-loop agent UI, or agents in... |
| create-graphics | engineering | unknown | skills/engineering/create-graphics/SKILL.md | Create brand-aligned feature illustrations, architecture and workflow diagrams, infographics, social graphics and editable whiteboards. Use when asked to illustrate a feature, explain a s... |
| design-engineering-polish | engineering | personal | skills/engineering/design-engineering-polish/SKILL.md | Build, audit and plan UI motion, prototype design variants, pick UI libraries and polish component feel. Use for animation reviews, motion details or component polish, or when the user sa... |
| frontend-design | engineering | personal | skills/engineering/frontend-design/SKILL.md | Design distinctive, production-grade frontend interfaces that avoid generic AI aesthetics. Use when building UI components, landing pages, dashboards or design systems, or when the user s... |
| frontend-design-taste | engineering | personal | skills/engineering/frontend-design-taste/SKILL.md | Build distinctive frontends without generic AI aesthetics: anti-slop rules, art direction archetypes, icon-system choice, performance guardrails. Use for landing pages, UI components or d... |
| frontend-frontier | engineering | personal | skills/engineering/frontend-frontier/SKILL.md | Use when the user wants a high-signal frontend, distinctive art direction, strong motion design, 3D/parallax, shader effects, landing pages, docs sites, dashboards, or a tokenized design... |
| geometric-logo-construction | engineering | personal | skills/engineering/geometric-logo-construction/SKILL.md | Construct logos and marks from geometric primitives on a grid with a stated ratio system, as editable SVG with construction layers. Use when designing a logo, mark, monogram, favicon or i... |
| gsap-scrolltrigger | engineering | personal | skills/engineering/gsap-scrolltrigger/SKILL.md | Animate the web with GSAP and ScrollTrigger: timelines, tweens, pinning, scrubbing and parallax for DOM, SVG, Canvas or WebGL. Use when building scroll-driven or sequenced animation. |
| gstack-design-review | engineering | personal | skills/engineering/gstack-design-review/SKILL.md | Audit a site's design with UX usability tests, or review the interface changes in a branch, diff or PR. Use on "design review", "UX audit", "visual audit", "review this UI change", "desig... |
| hyperframes-animation | engineering | unknown | skills/engineering/hyperframes-animation/SKILL.md | Animation for HyperFrames: motion rules, scene blueprints, transitions, text effects, choreography audits, and the GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI and TypeGPU adapters on one... |
| hyperframes-creative | engineering | unknown | skills/engineering/hyperframes-creative/SKILL.md | Set non-animation creative direction for HyperFrames videos: frame.md and design.md specs, palettes, typography, narration, beat planning, audio-reactive visuals and brand style. Use for... |
| hyperframes-keyframes | engineering | unknown | skills/engineering/hyperframes-keyframes/SKILL.md | Use when a HyperFrames composition needs seek-safe 2D or 3D keyframes: GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph and draw, text trails, or `hyperframes... |
| hyperframes-registry | engineering | unknown | skills/engineering/hyperframes-registry/SKILL.md | Install about 450 ready-made HyperFrames blocks and components as editable source: transitions, overlays, titles, kinetic type, captions, charts, maps, 3D, camera moves. Use before hand-b... |
| less-is-more-web | engineering | personal | skills/engineering/less-is-more-web/SKILL.md | Kevin's rules for any web page or app UI: one novel idea over a template, cut taglines, helper text and labels, full-bleed grounds over boxed rails, static render, no blocked navigation o... |
| loading-screens | engineering | personal | skills/engineering/loading-screens/SKILL.md | Implement loading states using braille Unicode spinners and skeleton placeholders. Use when adding loading indicators, replacing spinners, or building new loading screens. Covers componen... |
| locomotive-scroll | engineering | personal | skills/engineering/locomotive-scroll/SKILL.md | Add smooth scrolling with Locomotive Scroll: parallax, viewport detection, sticky and horizontal scrolling, scroll events and GSAP ScrollTrigger integration. Use when building immersive s... |
| lottie-animations | engineering | personal | skills/engineering/lottie-animations/SKILL.md | Generate and play Lottie animations on the web and in React: text-to-Lottie, SVG-to-Lottie, lottie-web, lottie-react, dotLottie and After Effects bodymovin JSON. Use when building animate... |
| make-interfaces-feel-better | engineering | personal | skills/engineering/make-interfaces-feel-better/SKILL.md | Apply design engineering details that make interfaces feel polished: motion, typography, shadows, borders, icons, optical alignment, micro-interactions, state feedback. Use when building... |
| mintlify-mdx | engineering | personal | skills/engineering/mintlify-mdx/SKILL.md | Write and debug Mintlify MDX: snippet sandbox rules, undocumented constraints, docs.json and styles.css overrides, npm bundling via yoink. Use when a Mintlify snippet will not compile, on... |
| modern-web-design | engineering | personal | skills/engineering/modern-web-design/SKILL.md | Apply modern web design patterns: micro-interactions, scrollytelling, bold minimalism, cursor UX, glassmorphism, accessibility, performance and design systems. Use when designing websites... |
| motion-framer | engineering | personal | skills/engineering/motion-framer/SKILL.md | Animate React and JavaScript with Motion: variants, gestures, layout animations, AnimatePresence exits, springs and scroll effects. Use when building interactive components, micro-interac... |
| oklch-skill | engineering | personal | skills/engineering/oklch-skill/SKILL.md | Work in the OKLCH color space: convert hex, rgb and hsl, generate palettes, check contrast, handle gamut and Display P3, and theme with Tailwind v4. Use for oklch, color conversion, desig... |
| pixel-art | misc | personal | skills/misc/pixel-art/SKILL.md | Use for pixel-art creation, animation, export, dithering, palette, and sprite workflows. Load the folded creator, animator, or exporter reference based on the requested artifact. |
| pixijs-2d | engineering | personal | skills/engineering/pixijs-2d/SKILL.md | Render fast 2D graphics with PixiJS on WebGL or WebGPU: sprites, sprite sheets, particles, filters and interactive canvases. Use when building 2D games, particle systems, canvas apps or U... |
| promote | deprecated | dedalus | skills/deprecated/promote/SKILL.md | Create a changelog-style promotion PR from dev to preview (or other branches). Use when Kevin says promote, dev→preview, ship to preview, or open a promotion PR with generated changelog. |
| react-spring-physics | engineering | personal | skills/engineering/react-spring-physics/SKILL.md | Build physics-based animation with React Spring and Popmotion: springs, gestures, inertia and composable streams. Use for natural-feeling UI motion, gesture-driven interfaces or spring ph... |
| scroll-reveal-libraries | engineering | personal | skills/engineering/scroll-reveal-libraries/SKILL.md | Add simple scroll-triggered fade and slide reveals with AOS (Animate On Scroll). Use for marketing, landing or content pages that need basic scroll effects; prefer GSAP ScrollTrigger, Loc... |
| scroll-world | engineering | external | skills/engineering/scroll-world/SKILL.md | Build a scroll-scrubbed cinematic landing page from a frame-locked chain of generated scenes, rendered with Monid Seedance or Higgsfield. Use for a "3D world" hero, fly-through brand worl... |
| shadcn | engineering | dedalus | skills/engineering/shadcn/SKILL.md | Add, search, fix, debug, style and compose shadcn/ui components and registries, with project context and component docs. Use when a project has a components.json, or for "shadcn init", --... |
| smooth-shadow-ring | engineering | unknown | skills/engineering/smooth-shadow-ring/SKILL.md | Route elevation through smooth-shadow-ring-* utilities to avoid the double border from pairing a ring or border with a shadow. Use when styling a card, dialog, popover, menu, tooltip, she... |
| stitch | engineering | personal | skills/engineering/stitch/SKILL.md | Use for Stitch MCP design workflows: generate designs, upload existing artifacts, extract design markdown, extract static HTML, manage design systems, code-to-design, and autonomous Stitc... |
| taste | engineering | personal | skills/engineering/taste/SKILL.md | Use for taste and UI style direction: brand kits, minimalist, brutalist, soft, GPT-motion, Stitch-informed design, redesigns, image-to-code, output polish, and the taste skills playbook. |
| threejs-webgl | engineering | personal | skills/engineering/threejs-webgl/SKILL.md | Build 3D for the web with Three.js, React Three Fiber, Babylon.js, PlayCanvas, A-Frame or Spline, plus Blender and Substance exports, procedural scenes and image-to-Three.js models. Use f... |
| transitions-dev | engineering | external | skills/engineering/transitions-dev/SKILL.md | Apply production-ready CSS transition recipes: dropdowns, modals, page transitions, text and icon swaps, skeleton loaders, shimmer, sliding tabs, tooltips, accordions, motion tokens. Use... |
| ui-vocabulary | engineering | personal | skills/engineering/ui-vocabulary/SKILL.md | Name an unfamiliar UI element or style from a description, screenshot, DOM or code, tell apart confusable patterns such as popover, tooltip and dropdown, and give prompt-ready wording. Us... |
| unocss | engineering | skills-sh | skills/engineering/unocss/SKILL.md | UnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Icons, Attributify. |
| visual-effects-atlas | engineering | personal | skills/engineering/visual-effects-atlas/SKILL.md | Give a design a distinctive look by naming a historical effect from photography, film, print or machine imaging and adapting its principle. Use when choosing an art direction, when a desi... |
| vite | engineering | skills-sh | skills/engineering/vite/SKILL.md | 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 libraries/SSR apps with Vite. |
| vitepress | engineering | skills-sh | skills/engineering/vitepress/SKILL.md | VitePress static site generator powered by Vite and Vue. Use when building documentation sites, configuring themes, or writing Markdown with Vue components. |
| web-design-guidelines | engineering | personal | skills/engineering/web-design-guidelines/SKILL.md | Audit UI code against Vercel's Web Interface Guidelines for design and accessibility. Use when reviewing UI code or when the user says "check design", "review my UI", "UI review", "access... |
Failure Modes
- Treating a repeated visual archetype as a one-off.
- Skipping mobile/contrast/overflow proof.
- Letting animation libraries substitute for product clarity.
Timeline
- 2026-11-02 | Regenerated this concise family synthesis page from Skill Registry after archiving verbose retired skill-article bodies to Retired Skill Article Ledger. private page
- 2026-11-02 | Concepts category refresh linked this generated family page to Concept System Map and kept it generated because executable skill source owns the procedure details. private page
Related Pages
165 pages link here
@web-kits/audioToolsActionable Tools IndexToolsActive Stack (What to Actually Use)MetaAgent Authored UI StyleStyleAgent Company OSArchitectureAgent Skill BundlesConceptsAgentic Quality SystemConceptsAI Sprite Sheet Generators (Category)Toolsanimated-component-librariesSkillsAnimation 3D RoutingSkill ResolverAnimation Vocabulary (Animations.dev)ToolsanimejsSkillsapp-onboarding-questionnaireSkillsAwesome Design MDToolsbarba-jsSkillsBase UIToolsBase44Toolsbetter-accessibilitySkillsBlocks.soToolsChanh Dai ComponentsToolsChudcoreDesignClerk EcosystemToolsCloudflare EcosystemToolsCnfastToolsComponent Library SourcesDesignConcept System MapConceptsConstraints over ContextConceptsContentbitToolscopilotkitSkillscreate-graphicsSkillsCult UIToolsCursor Design ModeToolsDeclarative Web Audio (Raphael Salaja)ToolsDesign Agencies ReferenceDesignDesign and AnimationStyleDesign Engineering ResourcesToolsDesign FilingFiling Decision TreeDesign Methodology AtlasDesignDesign Review RoutingSkill ResolverDesign TasteUSERdesign-engineering-polishSkillsDESIGN.mdDesignDetails That Make Interfaces Feel BetterToolsDevouring DetailsToolsDialKitToolsEasing GraphsToolsEmulate (Vercel-labs)Toolsenv.styleToolsEvil ChartsToolsFancy ComponentsToolsFigma MotionToolsFrontend FrontierDesignFrontend Frontier Radar WorkflowWorkflowsFrontend Guidelines (Bendc)Toolsfrontend-designSkillsfrontend-design-tasteSkillsfrontend-frontierSkillsFrontend, Design, Motion, and AccessibilityConceptsFrontier Stack 2026Designgeometric-logo-constructionSkillsGoogle StitchToolsgsap-scrolltriggerSkillsgstack-design-reviewSkillsHD TranscribeProjectsHeerich.jsToolsHTML-in-CanvasToolshyperframes-animationSkillshyperframes-creativeSkillshyperframes-keyframesSkillshyperframes-registrySkillsImpeccableToolsInheritable Taste Through Skill FilesConceptsInterface Micro-PolishDesignInterface SoundDesignIts HoverToolsKigen Palette GeneratorToolsless-is-more-webSkillsLiquid Glass for the WebDesignloading-screensSkillslocomotive-scrollSkillslottie-animationsSkillslucide-animatedToolsMagicPath (Web to Design)Toolsmake-interfaces-feel-betterSkillsMaking SoftwareToolsmintlify-mdxSkillsmodern-web-designSkillsMoodboard SitesToolsMotion 3D PlaybookDesignMotion Library RankingDesignMotion PrimitivesDesignmotion-framerSkillsMotion.devToolsNext.jsToolsNext.js App Router StyleStyleoklch-skillSkillsOpenRouter Image APIToolsOrigin UIToolsOriginkitToolspixel-artSkillspixijs-2dSkillsPrompt RecipesDesignPublic Brand Guideline ReferencesDesignRadix UIToolsReact BitsToolsreact-spring-physicsSkillsRefined Interface Design (Avoiding AI-dashboard Slop)DesignResend Design SkillsToolsRetired Skill Article LedgerMetaRust StyleStyleScroll WorldToolsscroll-reveal-librariesSkillsscroll-worldSkillsShadcn Registry Directory (Top Blocks)DesignShader Effects LibrariesDesignShader LabToolsShaders.comToolsShopifyToolsSigil Visual DoctorsConceptsSkill RegistryMetaSkill Sync WorkflowWorkflowsSkiper UIToolsSlash Command IndexMetaSlot TextToolssmooth-shadow-ringSkillsSpotted in ProdToolsstitchSkillsStripe RoutingSkill ResolverSubmenu Safe TriangleDesignSubtle Noise TexturesDesignSupabase EcosystemToolsSupabase TanStack DBToolsSuper HoverToolsTailwind v4 StyleStyletasteSkillsTaste Enforcement - Anti-Slop Frontend RulesDesignTaste Skill Framework (Leonxlnx/taste-skill)ToolsTerminal AestheticsDesignText Animations Collection (animate-text)ToolsText-to-LottieToolsthreejs-webglSkillsTOLIS BalloonDesigntransitions-devSkillsTransitions.devToolsType Foundries ReferenceDesignUI Component VocabularyConceptsUI Library RankingDesignUI Primitives ShortlistDesignUI Skills PackToolsui-vocabularySkillsunocssSkillsUserinterface.wikiDesignVercel React Best PracticesToolsvisual-effects-atlasSkillsviteSkillsvitepressSkillsweb-design-guidelinesSkillsWeb3D Library RankingDesignWebhook Delivery ArchitectureArchitectureWiki Capsules And Agent Doc PacksMetaX Bookmarks: 3D & Shaders (Mar–May 2026)ToolsX Bookmarks: AI Agents & Tools (Jan 2025 – Jun 2026)ToolsX Bookmarks: CSS & Frontend TechniquesToolsX Bookmarks: Design & UI (Feb–Jun 2026)DesignX Bookmarks: React & Next.js (Mar–Jun 2026)Tools