Tasks

Interface

This page is a short list of agent skills for designing a new UI — type, color, layout, and motion without default template chrome. Compare the four files below, pick one default, install it from GitHub or paste its SKILL.md, then ask the agent to design a real page with a concrete subject. frontend-design fits a blank UI; web-design-guidelines fits product screens; taste-skill when the brief is “look designed”; impeccable for a craft pass on work that already exists. Install steps: how to install.

4 skills

Product UI

Broader interface jobs: design systems, component choices, and the UX pass that sits above a single React file. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

4 skills

React

Composition, performance, and view transitions — the React jobs where an unguided agent usually over-renders or over-abstracts. The same SKILL.md can be pasted into Grok Bot or attached in that chat. For a repo workflow, see GitHub and Grok Bot.

3 skills

3D

Start with scene setup, then pick performance, React Three Fiber, interaction, or shaders only when the prompt is already in that lane. Extra CloudAI-X chapters stay in the index. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

5 skills

Components

shadcn/ui skill for Claude Code and Cursor: compare the official CLI playbook with the kit-choice file and the composition follow-up before you install. Default to shadcn when the repo is already on the kit; use pick-ui-library when no kit is chosen yet. Install steps: how to install. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

3 skills

Taste

This page compares taste-oriented agent skills for landings, portfolios, and redesigns that should not read as generic AI templates. Start with taste-skill, read the overlapping playbooks in the table, then install from the listing or paste the SKILL.md and ask for that job. For a broader blank-page UI brief, use frontend-design on the frontend design task. Install paths: how to install.

5 skills

Motion

Pick a motion file by the job: write a web animation, keep Expo motion on the UI thread, set timing before code, use GSAP when that is already the stack, or review animation that already exists. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

5 skills

Pixel art

Files that draw sprites on a grid — either through Aseprite via an MCP server (a live tool connection, separate from the skill file) or with Python and Pillow and no extra server. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

5 skills

Tailwind

Claude Tailwind skill options for agents: tailwind-design-system, tailwind-4-docs, tailwindcss, or unocss when the stack is UnoCSS. Open the SKILL.md, then install one for Claude, Cursor, or Codex. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

4 skills

Accessibility

Files that audit or implement WCAG 2.2 work on the web — keyboard paths, screen readers, and inclusive UI patterns — from a Lighthouse-led audit to assistive-tech testing. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

4 skills

Image to code

Screenshot to code and image-to-code skills for Claude Code, Cursor, and Codex: compare five SKILL.md pipelines before you install — generate references then build, clone a screenshot into HTML, pixel-lock a 750px board, write a clone prompt, or capture a DESIGN.md from a URL. This is skill selection and workflow, not an image generator. Install steps: how to install. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

5 skills

WordPress

Files for WordPress interface work — block themes and theme.json, the WordPress Design System for admin and editor UI, or block patterns that ship inside a theme. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

3 skills

Remotion

Files for programmatic Remotion video — scaffold a project, write composition markup, or export. Product UI animation stays on the motion task. The same SKILL.md can be pasted into Grok Bot or attached in that chat. For short social clips from a recording you own, see the clip farm playbook.

3 skills

Dashboards

This page is a short list of agent skills for admin dashboards — filters, hierarchy, empty states, and chart layout instead of a flat table plus one purple chart. Compare the entries below, install one from GitHub or paste its SKILL.md, then ask your agent to build or refine the dashboard. Reach for structure-first skills before a component kit like shadcn when that stack is yours.

4 skills

Mobile UI

Native-feeling Expo screens, design tokens, and React Native performance. Still interface work — not EAS billing or store submission. The same SKILL.md can be pasted into Grok Bot or attached in that chat. Grok Bot instructions: Grok Bot playbooks.

5 skills