8 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-07-15
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... |
| aframe-webxr | engineering | personal | skills/engineering/aframe-webxr/SKILL.md | Declarative web framework for building browser-based 3D, VR, and AR experiences using HTML and entity-component architecture. Use this skill when creating WebXR applications, VR experienc... |
| animated-component-libraries | engineering | personal | skills/engineering/animated-component-libraries/SKILL.md | Component-source routing for polished React, Tailwind, shadcn/Radix/Base, chart, toast, shader, animated-icon, interaction, and component-vocabulary sources: Component Gallery, Design Eng... |
| animejs | engineering | personal | skills/engineering/animejs/SKILL.md | Versatile JavaScript animation engine for DOM, CSS, SVG, and JavaScript objects. Use when creating timeline-based animations, stagger effects, SVG morphing, keyframe sequences, or complex... |
| app-onboarding-questionnaire | engineering | personal | skills/engineering/app-onboarding-questionnaire/SKILL.md | Design and build high-converting questionnaire-style app onboarding flows modelled on proven conversion patterns from top subscription apps (Headspace, Noom, Duolingo). Use when building... |
| barba-js | engineering | personal | skills/engineering/barba-js/SKILL.md | Page transitions library for creating fluid, smooth transitions between website pages. Use this skill when implementing page transitions, creating SPA-like experiences, adding animated ro... |
| blender-web-pipeline | engineering | personal | skills/engineering/blender-web-pipeline/SKILL.md | Blender to web export workflows for 3D models and animations. Use this skill when exporting Blender models to glTF for web, optimizing 3D assets for Three.js or Babylon.js, batch processi... |
| copilotkit | engineering | personal | skills/engineering/copilotkit/SKILL.md | Build or audit CopilotKit, AG-UI, Open Tag, and agent-frontend integrations. Use when the user mentions CopilotKit, Open Tag, AG-UI, generative UI, Slack/Teams/Discord/Google Chat agents,... |
| design-engineering-polish | engineering | personal | skills/engineering/design-engineering-polish/SKILL.md | Kevin's design-engineering polish route for UI motion, component feel, animation vocabulary, animation decisions, and invisible interface details. Use when reviewing animation decisions,... |
| frontend-design | engineering | personal | skills/engineering/frontend-design/SKILL.md | Distinctive, production-grade frontend interfaces that reject generic AI aesthetics. Use when creating UI components, landing pages, design systems, or any frontend work. Triggers on "mak... |
| frontend-design-taste | engineering | personal | skills/engineering/frontend-design-taste/SKILL.md | Build distinctive frontends that avoid generic AI aesthetics. Provides anti-slop enforcement, variance dials, art direction archetypes, creative arsenal, and performance guardrails. Use w... |
| 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... |
| gsap-scrolltrigger | engineering | personal | skills/engineering/gsap-scrolltrigger/SKILL.md | Comprehensive skill for GSAP (GreenSock Animation Platform) and ScrollTrigger plugin. Use this skill when creating web animations, scroll-driven experiences, timelines, tweens, scroll-tri... |
| gstack-design-review | engineering | personal | skills/engineering/gstack-design-review/SKILL.md | Design audit with UX usability tests. 6-phase audit with 80-item checklist and letter grades. Use when the user says "design review", "UX audit", "visual audit", "audit the UI", "how does... |
| lightweight-3d-effects | engineering | personal | skills/engineering/lightweight-3d-effects/SKILL.md | Lightweight 3D effects for decorative elements and micro-interactions using Zdog, Vanta.js, and Vanilla-Tilt.js. Use this skill when adding pseudo-3D illustrations, animated backgrounds,... |
| 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 | Comprehensive skill for Locomotive Scroll smooth scrolling library with parallax effects, viewport detection, and scroll-driven animations. Use this skill when implementing smooth scrolli... |
| lottie-animations | engineering | personal | skills/engineering/lottie-animations/SKILL.md | Lottie generation and playback for web and React applications. Use this skill when generating or implementing Lottie animations, text-to-Lottie assets, SVG-to-Lottie motion, JSON vector a... |
| make-interfaces-feel-better | engineering | personal | skills/engineering/make-interfaces-feel-better/SKILL.md | Design engineering principles for making interfaces feel polished. Use when building UI components, reviewing frontend code, implementing animations, hover states, shadows, borders, typog... |
| mintlify-mdx | engineering | personal | skills/engineering/mintlify-mdx/SKILL.md | Mastering Mintlify's MDX pipeline — undocumented constraints, snippet sandbox rules, CSS override patterns, and npm bundling via yoink. Use when writing or debugging Mintlify snippets, cu... |
| modern-web-design | engineering | personal | skills/engineering/modern-web-design/SKILL.md | Modern web design trends, principles, and implementation patterns for 2024-2025. Use this skill when designing websites, creating interactive experiences, implementing design systems, ens... |
| motion-framer | engineering | personal | skills/engineering/motion-framer/SKILL.md | Modern animation library for React and JavaScript. Create smooth, production-ready animations with motion components, variants, gestures (hover/tap/drag), layout animations, AnimatePresen... |
| oklch-skill | engineering | personal | skills/engineering/oklch-skill/SKILL.md | OKLCH color space for web projects. Convert hex/rgb/hsl to oklch, generate palettes, check contrast, handle gamut boundaries, and theme with Tailwind v4. Triggers on oklch, color conversi... |
| 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 | Fast, lightweight 2D rendering engine for creating interactive graphics, particle effects, and canvas-based applications using WebGL/WebGPU. Use this skill when building 2D games, particl... |
| promote | engineering | dedalus | skills/engineering/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 | Physics-based animation library combining React Spring (spring dynamics, gesture integration, 60fps animations) and Popmotion (low-level composable animation utilities, reactive streams).... |
| scroll-reveal-libraries | engineering | personal | skills/engineering/scroll-reveal-libraries/SKILL.md | Simple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites requiring basic fade/slide eff... |
| shadcn | engineering | dedalus | skills/engineering/shadcn/SKILL.md | Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when workin... |
| 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... |
| substance-3d-texturing | engineering | personal | skills/engineering/substance-3d-texturing/SKILL.md | Comprehensive skill for Adobe Substance 3D Painter texturing and material creation workflow. Use this skill when creating PBR materials, exporting textures for web/game engines, optimizin... |
| 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 | Comprehensive skill for Three.js 3D web development. Use this skill when building interactive 3D scenes, WebGL/WebGPU applications, product configurators, 3D visualizations, or immersive... |
| transitions-dev | engineering | external | skills/engineering/transitions-dev/SKILL.md | Production-ready CSS transition recipes for web apps. Use when implementing notification badges, dropdowns, modals, panel reveals, page transitions, card resizes, number pop-ins, text swa... |
| 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. |
| 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 compliance. Use when reviewing UI code, checking accessibility, auditing components, or when the user... |
| web3d-integration-patterns | engineering | personal | skills/engineering/web3d-integration-patterns/SKILL.md | Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences. Use when building applications that integrate multiple 3... |
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-07-15 | Regenerated this concise family synthesis page from Skill Registry after archiving verbose retired skill-article bodies to Retired Skill Article Ledger. Source: User request, 2026-06-27
- 2026-07-15 | Concepts category refresh linked this generated family page to Concept System Map and kept it generated because executable skill source owns the procedure details. Source: User request, 2026-07-01
Related Pages
267 pages link here
@web-kits/audioToolsaccessibilitySkillsActionable Tools IndexToolsActive Stack (What to Actually Use)MetaAdversarial Self-Audit PromptsConceptsAesthetic SystemsDesignaframe-webxrSkillsAgent Authored UI StyleStyleAgent Company OSArchitectureAgent Operating SystemArchitectureAgent Operations HubMetaAgent Skill BundlesConceptsAgentic InfrastructureConceptsAgentic Quality SystemConceptsAI Sprite Sheet Generators (Category)ToolsAI Work Maturity LadderConceptsAI-Native Design PatternsDesignai-test-kitToolsAlgorithmic Slop Throttling (Posting for the X Algorithm)Conceptsanimated-component-librariesSkillsAnimation 3D RoutingSkill ResolverAnimation Vocabulary (Animations.dev)ToolsanimejsSkillsapp-onboarding-questionnaireSkillsASCII MagicToolsAustin LauPeopleAutoResearch (Karpathy) - Applied to MarketingToolsAwesome Design MDToolsbarba-jsSkillsBase UIToolsBase44ToolsBeta DX Walk (Friction Is a Bug)Conceptsblender-web-pipelineSkillsBlocks.soToolsBorrowed Intelligence (Drain It into Plans)ConceptsBrain CapsulesMetaBuilding in PublicStoriesCareer Content RoutingSkill ResolverCareer ProfileCareerCareer-OpsToolsChanh Dai ComponentsToolsChudcoreDesignClaude Fable 5ToolsClaude Prompting PrinciplesConceptsClerk EcosystemToolsClipping as Distribution StrategyConceptsCloudflare EcosystemToolsCnfastToolsCode Bugfix WorkflowWorkflowsCode TasteStyleComplementary Browser TestingConceptsComponent Library SourcesDesignConcept System MapConceptsConstraints over ContextConceptsContent BacklogCareerContent Pipeline WorkflowWorkflowsContent Plan Archive, April–May 2026CareerContentbitToolscopilotkitSkillsCult UIToolsCursor Design ModeToolsDeclarative Web Audio (Raphael Salaja)ToolsDedalus E2E Tiered TestingWorkflowsDedalus Machines - Positioning & PitchProjectsDesign Agencies ReferenceDesignDesign and AnimationStyleDesign EngineeringConceptsDesign Engineering ResourcesToolsDesign FilingFiling Decision TreeDesign Methodology AtlasDesignDesign Review RoutingSkill ResolverDesign System MapDesignDesign TasteUSERDesign TokensDesigndesign-engineering-polishSkillsDesign-Tree Exploration (Shape Before Depth)ConceptsDESIGN.mdDesignDetails That Make Interfaces Feel BetterToolsDevouring DetailsToolsDevtool Growth PlaybookConceptsDialKitToolsDistribution Is the MoatPhilosophiesDoctor PatternConceptsDot MatrixToolsEasing GraphsToolsEmil KowalskiPeopleEmpirical VerificationConceptsEmulate (Vercel-labs)Toolsenv.styleToolsEverything Claude Code - Agent Harness Performance SystemToolsEvil ChartsToolsFancy ComponentsToolsFigma MotionToolsFrontend FrontierDesignFrontend Frontier Radar WorkflowWorkflowsFrontend Guidelines (Bendc)ToolsFrontend Tactics AtlasDesignfrontend-designSkillsfrontend-design-tasteSkillsfrontend-frontierSkillsFrontend, Design, Motion, and AccessibilityConceptsFrontier Stack 2026DesignGoogle StitchToolsGraphifyToolsgsap-scrolltriggerSkillsgstack-design-reviewSkillsGuillermo RauchPeopleHD TranscribeProjectsHeerich.jsToolsHiggsfield MCPToolsHTML-in-CanvasToolsHumanX 2026 Outreach StrategyCareerHyperFramesToolsImagination ChasmPhilosophiesImpeccableToolsInheritable Taste Through Skill FilesConceptsInterface Micro-PolishDesignInterface SoundDesignInvariant-First TestingConceptsIts HoverToolsJSON Render -- Generative UI FrameworkToolsKigen Palette GeneratorToolsKoen BokPeopleLaunch Agent System (Matt Epstein)ToolsLaunch Post PlaybookCareerlightweight-3d-effectsSkillsLint-Enforced Agent GuardrailsConceptsLiquid Glass for the WebDesignLiquid Glass JSToolsLiquid Glass vs Flat 2026DesignLiquid Logo (Paper Shaders Liquid Metal)Toolsloaders.wtfToolsloading-screensSkillsLocal Web VerificationConceptslocomotive-scrollSkillsLoopProjectsLoop App OriginStoriesLoopyToolslottie-animationsSkillslucide-animatedToolsMagicPath (Web to Design)Toolsmake-interfaces-feel-betterSkillsMaking SoftwareToolsMath Curve LoadersToolsMatt PocockPeopleMatt Pocock's Skills (Skills for Real Engineers)Toolsmintlify-mdxSkillsmodern-web-designSkillsMoneyPrinterTurboToolsMoodboard SitesToolsMotion 3D PlaybookDesignMotion Animation StyleStyleMotion Library RankingDesignMotion PrimitivesDesignmotion-framerSkillsMotion.devToolsNext.jsToolsNext.js App Router StyleStyleoklch-skillSkillsOpenRouter Image APIToolsOperational RoutingSkill ResolverOrigin UIToolsPaper Design ToolDesignpixel-artSkillspixijs-2dSkillspromoteSkillsPrompt RecipesDesignPublic Brand Guideline ReferencesDesignPublic IdentityUSERQA Testing RoutingSkill ResolverRadix UIToolsReact BitsToolsReact StyleStylereact-spring-physicsSkillsReClip - Self-Hosted Video DownloaderToolsRefined Interface Design (Avoiding AI-dashboard Slop)DesignRemixToolsRemotion + Claude Code Marketing DemosWorkflowsResend Design SkillsToolsReticle Design SystemDesignRetired Skill Article LedgerMetaRust StyleStyleSaaS Stack 2026Conceptsscroll-reveal-librariesSkillsSEO + GEOToolsshadcnSkillsShadcn Registry Directory (Top Blocks)Designshadcn/improveToolsShader Effects LibrariesDesignShader LabToolsShaders.comToolsSigil Visual DoctorsConceptsSignal Radar WorkflowWorkflowsSkill Maintenance CadenceHEARTBEATSkill RegistryMetaSkill Sync WorkflowWorkflowsSkills.sh - Agent Skills RegistryToolsSkiper UIToolsSlash Command IndexMetaSlot TextToolsSocial Content OSToolsSource Compile WorkflowWorkflowsSpinners CollectionToolsSpotted in ProdToolsstitchSkillsStripe EcosystemToolsStripe RoutingSkill ResolverSubmenu Safe TriangleDesignsubstance-3d-texturingSkillsSubtle Noise TexturesDesignSupabase EcosystemToolsSupabase TanStack DBToolsSuper HoverToolsTailwind v4 StyleStyleTakumiToolsTanStack EcosystemToolstasteSkillsTaste Enforcement - Anti-Slop Frontend RulesDesignTaste Skill Framework (Leonxlnx/taste-skill)ToolsTerminal AestheticsDesignText Animations Collection (animate-text)ToolsText-to-LottieToolsThe 7 Phases of AI-Powered DevelopmentWorkflowsThe SVGToolsthreejs-webglSkillsTOLIS BalloonDesigntransitions-devSkillsTransitions.devToolsType Foundries ReferenceDesignUI Component VocabularyConceptsUI Library RankingDesignUI Primitives ShortlistDesignUI Skills PackToolsunocssSkillsUserinterface.wikiDesignVercel Agent SkillsToolsVercel EcosystemToolsVercel React Best PracticesToolsVibecoding CritiqueConceptsviteSkillsvitepressSkillsWeb Design GuidelinesDesignweb-design-guidelinesSkillsWeb3D Library RankingDesignweb3d-integration-patternsSkillsWebhook Delivery ArchitectureArchitectureWebsite Cloner SkillToolsWebsite Design StylesDesignWiki Capsules And Agent Doc PacksMetaWiki Redirect IndexMetaX Bookmark Ingest - 2026-06-24ResearchX Bookmark Ingest 2026-06-25ResearchX Bookmark Ingest 2026-06-26ResearchX Bookmark Ingest 2026-06-28ResearchX Bookmark Ingest 2026-07-12ResearchX Bookmark Ingest 2026-07-13ResearchX 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: Dev Tools (Mar–Jun 2026)ToolsX Bookmarks: React & Next.js (Mar–Jun 2026)ToolsX Community Notes Scoring (Bridging Algorithm)ArchitectureX For You Algorithm (2026 Open Source)ArchitectureX-AgentProjectsYC Verbs PositioningConceptsZero Tech DebtTools