NeVibeCode · 2,909 items
Skills for Frontend and UI
Skills for Frontend and UI: what each one does, an install command and example prompts.
tanstack-router-best-practices skill A rule set for TanStack Router in React: type safety, data loading, search params, navigation. Useful once routing in a project grows past a few pages.
CX Codex +1
7,100installs
tailwind-css-patterns skill A skill that hands your agent ready Tailwind CSS patterns: responsive grids, cards, forms, dark mode. Useful when it styles React, Vue or Svelte components.
CX Codex +1
17,700installs
brutalism skill This skill hands your agent a set of brutalist design rules: concrete aesthetics, jarring layouts, functional minimalism. Useful when you want an interface with no polish.
CX Codex +1
2,400installs
material skill Enforces Material Design guidelines, typography scales, color tokens, and WCAG 2.2 AA rules when designing components with AI agents.
CX Codex +1
2,400installs
corporate skill This skill gives an agent a corporate UI system with grids, tokens, component states, and accessibility rules. Use it when writing implementation-ready design guidance.
CX Codex +1
2,400installs
contemporary skill Gives your agent rules for a current-era minimal UI: bento grids, dark mode, WCAG 2.2 AA accessibility. Useful when you build interfaces and want one consistent style.
CX Codex +1
2,400installs
sleek skill Generates design system guidelines with an 8pt grid, Inter typography, concrete color tokens, and WCAG 2.2 AA accessibility standards.
CX Codex +1
2,400installs
claymorphism skill A skill that turns your coding agent into a design-system author for claymorphism: puffy 3D shapes, tokens, typography and component states.
CX Codex +1
2,400installs
storytelling skill A skill that turns the agent into a design-system author: tokens, component states, accessibility and a fixed output structure. Useful when an interface needs one coherent logic.
CX Codex +1
2,400installs
modern skill Generates editorial design system specs with IBM Plex Serif typography and minimal color tokens. Helps build WCAG 2.2 AA compliant UI rules and review checklists.
CX Codex +1
2,400installs
neumorphism skill This skill guides agents in creating neumorphic UI with design tokens, component states, and accessibility checks. Use it when shaping a UI or design system.
CX Codex +1
2,500installs
professional skill Hands the agent a full set of design-system rules: tokens, typography, component states and accessibility criteria. Useful when you want a clean interface without hand-tweaking.
CX Codex +1
2,500installs
refined skill Directs coding agents to generate design system specifications using Playfair Display typography and Refined tokens. Focuses on WCAG 2.2 AA accessibility and explicit component states.
CX Codex +1
2,500installs
neobrutalism skill This skill guides AI coding agents on neobrutalist UI with strong contrast, design tokens, component states, and accessibility checks.
CX Codex +1
2,500installs
shadcn skill Gives the agent a shadcn/ui-style design system: tokens, typography, component states and accessibility criteria.
CX Codex +1
2,500installs
react-component-performance skill Identifies React render hotspots, isolates fast-changing state, and eliminates re-render churn. Useful when lists lag or components re-render too often.
CX Codex +1
1,100installs
gsap skill A skill that helps your coding agent write and debug GSAP web animations: timelines, ScrollTrigger, stagger, transforms.
CX Codex +1
1,800installs
design-first-ui-prompting skill Turns loose visual ideas into strict, design-system-style specifications for UI generation. It fixes grids, typography rules, and spacing upfront for predictable screens.
CX Codex +1
1,800installs
gsap-scrolltrigger-storytelling skill A skill for scroll-driven product storytelling: pinned scenes, progressive UI reveals and transitions between sections, built on GSAP ScrollTrigger.
CX Codex +1
1,800installs
threejs-asset-pipeline skill A skill for compressing and validating glTF models before loading them in three.js: gltf-transform commands, Draco, meshopt, KTX2 and gltfjsx.
CX Codex +1
1,300installs
threejs-react-three-fiber skill A skill for writing three.js scenes as React components. Covers the Canvas, frame-loop hooks and pointer events in React Three Fiber.
CX Codex +1
1,300installs
react-three-fiber skill Teaches the agent to build declarative Three.js 3D scenes in React using JSX components, animation hooks, and Suspense loaders.
CX Codex +1
3,800installs
tech-stack-evaluator skill Evaluates frameworks, libraries, and cloud providers with weighted scoring. Calculates five-year TCO and assesses migration risks before project kickoff.
904installs
huashu-motion skill Creates motion graphics, launch videos, and explainers as editable code. Useful when you want to review a live frame and change that exact part.
CX Codex +1
827installs
figma-codegen skill Generates framework-aware frontend code from Figma designs while reusing existing project components and design tokens.
CX Codex +1
1,300installs
pinme skill Deploys static builds to IPFS and provisions full-stack apps on Cloudflare Workers and D1 databases. Useful when you need instant hosting for static sites or lightweight APIs.
CX Codex +1
710installs
immersive skill Generates design system guidelines for exhibit-style interfaces with a deep green canvas, Oswald display typography, and hard shadows.
CX Codex +1
2,300installs
claude skill Turns your agent into a design-system author: warm parchment surfaces, near-black ink, one restrained accent. Useful when you want an editorial look with no shadows.
CX Codex +1
2,300installs
tetris skill A skill that makes the agent write design-system guidance in the spirit of the classic block game: playful colors, bold display type, compact layouts.
CX Codex +1
2,300installs
pacman skill Guides coding agents to build 8-bit arcade design systems with pixel typography, dotted borders, high-contrast tokens, and strict WCAG 2.2 AA accessibility.
CX Codex +1
2,300installs
perspective skill Turns the agent into a design-system author for isometric layouts, vanishing points and layered depth. Useful when flat blocks are not enough.
CX Codex +1
2,300installs
expressive skill Guides AI agents to author design system rules with bold colors and IBM Plex Mono typography. Keeps interfaces aligned with WCAG 2.2 AA standards.
CX Codex +1
2,300installs
skeumorphism skill This skill guides skeuomorphic UI work with textures, 3D effects, and familiar physical metaphors. Use it when shaping a design system.
CX Codex +1
2,300installs
neon skill Turns your coding agent into an author of Neon design-system guidance: high-contrast color pairings, glow effects, tokens instead of raw values.
CX Codex +1
2,300installs
retro skill Sets up a vintage design system with high-contrast palettes, Macondo typography, and WCAG 2.2 AA accessible component guidelines.
CX Codex +1
2,300installs
vibrant skill Gives your agent a full set of rules for a lively UI: color tokens, type scale, spacing and accessibility. Useful when the default grey look is not what you want.
CX Codex +1
2,300installs
levels skill A skill that hands your coding agent the Levels design system: color tokens, component states, accessibility rules. Useful when a UI needs one consistent style.
CX Codex +1
2,300installs
dithered skill Provides design system guidelines for dithered dot-pattern aesthetics. Generates ready-to-code tokens, component specs, and accessibility checklists.
CX Codex +1
2,300installs
fantasy skill A game-inspired design-system skill for bold fantasy UI. It helps agents define visual foundations, component rules, and accessibility checks.
CX Codex +1
2,300installs
mono skill Turns your agent into a design-system author for a matrix-flavoured look: monospace type, high contrast, compact density. Useful when the UI should read like a hacker terminal.
CX Codex +1
2,300installs
721–760 of 2,909
