11 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-09-25
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 |
|---|---|---|---|---|
| absorb-sources | productivity | unknown | skills/productivity/absorb-sources/SKILL.md | Capture and analyze saved evidence from Discord, X, Hacker News, articles, repositories, media, notes, or pasted URLs; correlate sources; bind every useful signal to stable Kevin Wiki obj... |
| 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 | Route polished React, Tailwind, shadcn/Radix/Base/React Aria, chart, toast, shader, animated-icon, timeline, interaction, and creative-design-app work to the strongest source before hand-... |
| 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,... |
| create-graphics | engineering | unknown | skills/engineering/create-graphics/SKILL.md | Create polished, brand-aligned feature illustrations, architecture or workflow diagrams, infographics, and website graphics. Use when a user asks to illustrate a feature, explain a system... |
| design-engineering-polish | engineering | personal | skills/engineering/design-engineering-polish/SKILL.md | Kevin's design-engineering polish route for building, auditing, planning, and discovering UI motion; prototyping design variants and signature-first visual directions; selecting UI librar... |
| 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, product-specific icon-system admission, creative ar... |
| 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 plus change-scoped interface review for branches, diffs, and pull requests. Use when the user says "design review", "UX audit", "visual audit", "audit... |
| hyperframes-animation | engineering | unknown | skills/engineering/hyperframes-animation/SKILL.md | All animation knowledge for HyperFrames — atomic motion rules, multi-phase scene blueprints, scene transitions, broader motion-design techniques, AND the seven runtime adapters (GSAP defa... |
| hyperframes-creative | engineering | unknown | skills/engineering/hyperframes-creative/SKILL.md | Non-animation creative direction for HyperFrames videos. Use for design spec (frame.md / design.md) handling, palettes, typography, narration, beat planning, audio-reactive visuals, compo... |
| hyperframes-keyframes | engineering | unknown | skills/engineering/hyperframes-keyframes/SKILL.md | Use when a HyperFrames composition needs seek-safe 2D/3D keyframes, GSAP timelines, CSS keyframes, Anime.js, WAAPI, FLIP, paths, masks, SVG morph/draw, text trails, 3D depth, or `hyperfra... |
| illo | engineering | unknown | skills/engineering/illo/SKILL.md | Creates original editorial illustrations where a recurring mascot character performs the idea — one caught scene by default, a hand-built explainer diagram (a flow, fan-out, timeline, loo... |
| img2threejs | engineering | external | skills/engineering/img2threejs/SKILL.md | Turn an object or character reference image into a quality-gated, animation-ready procedural Three.js model built in code. Use for image-to-3D reconstruction, detail-accurate object rebui... |
| 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 or reviewing UI components, motion, typography, surfaces, icons, micro-interactions, and state feedbac... |
| media-use | in-progress | unknown | skills/in-progress/media-use/SKILL.md | Agent Media OS, the single skill for every media need in a HyperFrames project. Resolve BGM, SFX, image, icon, brand logo, voice, color grade, or LUT into a frozen local file or paste-rea... |
| 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... |
| smooth-shadow-ring | engineering | unknown | skills/engineering/smooth-shadow-ring/SKILL.md | Use when styling any elevated surface (card, dialog, popover, dropdown, menu, tooltip, sheet, toast) in a Tailwind project that has shadow-plugin installed. Prevents the double-border art... |
| step-parts | engineering | external | skills/engineering/step-parts/SKILL.md | Find, evaluate, and download common purchasable CAD parts from step.parts, including named off-the-shelf actuators, servos, motors, electronics boards, connectors, screws, bolts, nuts, wa... |
| 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-landscape | engineering | unknown | skills/engineering/threejs-landscape/SKILL.md | Build a live Three.js landscape that stays quiet behind a subject — a noise heightfield on a polar grid so resolution follows the lens, ground coloured by slope and moisture rather than b... |
| threejs-weather | engineering | unknown | skills/engineering/threejs-weather/SKILL.md | Put weather into a Three.js scene that reads as weather — rain anchored inside the frustum, a storm that is the rain leaned on rather than a second system, lightning on its own light with... |
| 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-09-25 | 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-09-25 | 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
211 pages link here
@web-kits/audioToolsabsorb-sourcesSkillsaccessibilitySkillsActionable Tools IndexToolsActive Stack (What to Actually Use)MetaAesthetic SystemsDesignaframe-webxrSkillsAgent Authored UI StyleStyleAgent Company OSArchitectureAgent Operating SystemArchitectureAgent Skill BundlesConceptsAgentic InfrastructureConceptsAgentic Quality SystemConceptsAI Sprite Sheet Generators (Category)ToolsAI-Native Design PatternsDesignanimated-component-librariesSkillsAnimation 3D RoutingSkill ResolverAnimation Vocabulary (Animations.dev)ToolsanimejsSkillsapp-onboarding-questionnaireSkillsASCII MagicToolsAwesome Design MDToolsbarba-jsSkillsBase UIToolsBase44Toolsblender-web-pipelineSkillsBlocks.soToolsChanh Dai ComponentsToolsChudcoreDesignClerk EcosystemToolsCloudflare EcosystemToolsCnfastToolsComponent Library SourcesDesignConcept System MapConceptsConstraints over ContextConceptsContentbitToolscopilotkitSkillscreate-graphicsSkillsCult UIToolsCursor Design ModeToolsDeclarative Web Audio (Raphael Salaja)ToolsDesign Agencies ReferenceDesignDesign and AnimationStyleDesign EngineeringConceptsDesign Engineering ResourcesToolsDesign FilingFiling Decision TreeDesign Methodology AtlasDesignDesign Review RoutingSkill ResolverDesign System MapDesignDesign TasteUSERDesign TokensDesigndesign-engineering-polishSkillsDESIGN.mdDesignDetails That Make Interfaces Feel BetterToolsDevouring DetailsToolsDialKitToolsDot MatrixToolsEasing GraphsToolsEmil KowalskiPeopleEmulate (Vercel-labs)Toolsenv.styleToolsEvil ChartsToolsFancy ComponentsToolsFigma MotionToolsFrontend FrontierDesignFrontend Frontier Radar WorkflowWorkflowsFrontend Guidelines (Bendc)ToolsFrontend Tactics AtlasDesignfrontend-designSkillsfrontend-design-tasteSkillsfrontend-frontierSkillsFrontend, Design, Motion, and AccessibilityConceptsFrontier Stack 2026DesignGoogle StitchToolsgsap-scrolltriggerSkillsgstack-design-reviewSkillsGuillermo RauchPeopleHD TranscribeProjectsHeerich.jsToolsHTML-in-CanvasToolshyperframes-animationSkillshyperframes-creativeSkillshyperframes-keyframesSkillsilloSkillsimg2threejsSkillsImpeccableToolsInheritable Taste Through Skill FilesConceptsInterface Micro-PolishDesignInterface SoundDesignIts HoverToolsKigen Palette GeneratorToolsKoen BokPeoplelightweight-3d-effectsSkillsLiquid Glass for the WebDesignLiquid Glass JSToolsLiquid Glass vs Flat 2026Designloaders.wtfToolsloading-screensSkillslocomotive-scrollSkillslottie-animationsSkillslucide-animatedToolsMagicPath (Web to Design)Toolsmake-interfaces-feel-betterSkillsMaking SoftwareToolsMath Curve LoadersToolsmedia-useSkillsmintlify-mdxSkillsmodern-web-designSkillsMoodboard SitesToolsMotion 3D PlaybookDesignMotion Animation StyleStyleMotion Library RankingDesignMotion PrimitivesDesignmotion-framerSkillsMotion.devToolsNext.jsToolsNext.js App Router StyleStyleoklch-skillSkillsOpenRouter Image APIToolsOrigin UIToolsOriginkitToolsPaper Design ToolDesignpixel-artSkillspixijs-2dSkillspromoteSkillsPrompt RecipesDesignPublic Brand Guideline ReferencesDesignRadix UIToolsReact BitsToolsReact StyleStylereact-spring-physicsSkillsRefined Interface Design (Avoiding AI-dashboard Slop)DesignResend Design SkillsToolsReticle Design SystemDesignRetired Skill Article LedgerMetaRust StyleStyleSaaS Stack 2026ConceptsScroll WorldToolsscroll-reveal-librariesSkillsshadcnSkillsShadcn Registry Directory (Top Blocks)DesignShader Effects LibrariesDesignShader LabToolsShaders.comToolsShopifyToolsSigil Visual DoctorsConceptsSkill RegistryMetaSkill Sync WorkflowWorkflowsSkills.sh - Agent Skills RegistryToolsSkiper UIToolsSlash Command IndexMetaSlot TextToolssmooth-shadow-ringSkillsSpinners CollectionToolsSpotted in ProdToolsstep-partsSkillsstitchSkillsStripe EcosystemToolsStripe RoutingSkill ResolverSubmenu Safe TriangleDesignsubstance-3d-texturingSkillsSubtle Noise TexturesDesignSupabase EcosystemToolsSupabase TanStack DBToolsSuper HoverToolsTailwind v4 StyleStyleTanStack EcosystemToolstasteSkillsTaste Enforcement - Anti-Slop Frontend RulesDesignTaste Skill Framework (Leonxlnx/taste-skill)ToolsTerminal AestheticsDesignText Animations Collection (animate-text)ToolsText-to-LottieToolsThe SVGToolsthreejs-landscapeSkillsthreejs-weatherSkillsthreejs-webglSkillsTOLIS BalloonDesigntransitions-devSkillsTransitions.devToolsType Foundries ReferenceDesignUI Component VocabularyConceptsUI Library RankingDesignUI Primitives ShortlistDesignUI Skills PackToolsunocssSkillsUserinterface.wikiDesignVercel Agent SkillsToolsVercel EcosystemToolsVercel React Best PracticesToolsviteSkillsvitepressSkillsWeb Design GuidelinesDesignweb-design-guidelinesSkillsWeb3D Library RankingDesignweb3d-integration-patternsSkillsWebhook Delivery ArchitectureArchitectureWebsite 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-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)Tools