ui skills

react/react

Skill Claude CodeCodex

Use when feature flag tests fail, flags need updating, understanding @gate pragmas, debugging channel-specific test failures, or adding new flags to React.

react/react

Skill Claude CodeCodex

Orchestrate the Rust compiler port end-to-end. Discovers the current frontier, fixes failing passes, ports new passes, reviews, and commits in a loop.

react/react

Skill Claude CodeCodex

Use when you need to update a plan document with deep research across all compiler passes. Launches parallel subagents to analyze how a topic affects every compiler phase, then consolidates findings into the plan doc.

gradio-app/gradio

Skill Claude CodeCodex

Write comprehensive, behaviour-driven unit tests for Gradio frontend Svelte components using Vitest browser mode, Playwright, and the @self/tootils test utilities.

gradio-app/gradio

Skill Claude CodeCodex

Build and customise Gradio themes. Use when creating, editing, or publishing Python-based Gradio themes that control colours, typography, spacing, shadows, and dark mode.

gradio-app/gradio

Skill Claude CodeCodex

Build Gradio web UIs and demos in Python. Use when creating, modifying, debugging, or answering questions about Gradio and its capabilties, components, event listeners, or layouts.

tamagui/tamagui

Skill Claude CodeCodex

Git safety rules. INVOKE WHEN: git push, force push, git reset, git clean, destructive git, push force, reset hard. NEVER force push or do destructive git operations.

tamagui/tamagui

Skill Claude CodeCodex

Release safety rules. INVOKE WHEN: yarn release, npm publish, release canary, release packages, publishing, skip checks, skip tests. NEVER skip checks or tests without explicit permission.

tamagui/tamagui

Skill Claude CodeCodex

Universal React UI framework for web and native. Use when building cross-platform apps with Tamagui, creating styled components with styled(), configuring design tokens/themes, using Tamagui UI components, or working with animations. Triggers: "tamagui", "styled()", "$token", "XStack/YStack", "useTheme", "@tamagui/"…

siteboon/claudecodeui

Skill Claude CodeCodex

Enforce this repository's TypeScript backend module architecture standards. Use whenever creating, modifying, refactoring, or reviewing backend code under server/, including routes, services, modules, repositories, shared backend code, and backend tests. Do not apply these rules to frontend code or non-backend…

nuxt/ui

Skill Claude CodeCodex

Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.

benjitaylor/agentation

Skill Claude CodeCodex

Autonomous design critique mode using the Agentation annotation toolbar. Use when the user asks to "critique this page," "add design annotations," "review the UI," "self-driving mode," "auto-annotate," or wants an AI agent to autonomously add design feedback annotations to a web page via the browser. Requires the…

benjitaylor/agentation

Skill Claude CodeCodex

Add Agentation visual feedback toolbar to a Next.js project.

nank1ro/flutter-shadcn-ui

Skill Claude CodeCodex

A comprehensive Flutter UI library inspired by shadcn/ui. Provides high-quality, customizable, and accessible components including Buttons, Cards, Forms, and more. Use this skill when building Flutter UIs, implementing design systems, or needing specific component usage examples.

modelcontextprotocol/ext-apps

Skill Claude CodeCodex

This skill should be used when the user asks to "add an app to my MCP server", "add UI to my MCP server", "add a view to my MCP tool", "enrich MCP tools with UI", "add interactive UI to existing server", "add MCP Apps to my server", or needs to add interactive UI capabilities to an existing MCP server that already has…

modelcontextprotocol/ext-apps

Skill Claude CodeCodex

This skill should be used when the user asks to "add MCP App support to my web app", "turn my web app into a hybrid MCP App", "make my web page work as an MCP App too", "wrap my existing UI as an MCP App", "convert iframe embed to MCP App", "turn my SPA into an MCP App", or needs to add MCP App support to an existing…

modelcontextprotocol/ext-apps

Skill Claude CodeCodex

This skill should be used when the user asks to "migrate from OpenAI Apps SDK", "convert OpenAI App to MCP", "port from window.openai", "migrate from skybridge", "convert openai/outputTemplate", or needs guidance on converting OpenAI Apps SDK applications to MCP Apps SDK. Provides step-by-step migration guidance with…

bergside/typeui

Skill Claude CodeCodex

Use TypeUI with Grok to access project design skills, brand kits, UI prompts, and layout variations through the TypeUI MCP server when creating or refining user interfaces.

bergside/typeui

Skill Claude CodeCodex

Universal UI/UX design principles covering visual hierarchy, interaction laws, typography foundations, and WCAG accessibility requirements. Use when making design decisions not covered by a specific design system, validating principle compliance, or resolving conflicts between aesthetics and accessibility.…

inkline/inkline

Skill Claude CodeCodex

The Inkline compiler's end-to-end pipeline — parse → IR → analyze → per-target codegen → print — including the IR contracts, reactivity tracking, target rewrite rules, plugin hooks, the two compile paths, and known sharp edges. Use for any core/ work, or when reviewing it.

inkline/inkline

Skill Claude CodeCodex

Author a pull request in the Guild's standard shape — a fixed Summary / Changes / Verification / Notes skeleton that mirrors the review-gate, plus the hard anti-leak rule that no agent @mention or mention:// link ever reaches a public PR. Use whenever you are about to open a PR (e.g. /create-pr), so the PR passes…

inkline/inkline

Skill Claude CodeCodex

Phase 2 of building an Inkline component — write the .ink.tsx source. Author the headless part(s) (behavior + accessibility, no styling), then one styled component that composes them and applies a styleframe recipe, then the .styleframe.ts, then register the export. Compiles to all 7 frameworks. Use when implementing…

LottieFiles/motion-design-skill

Skill Claude CodeCodex

Applies motion design principles to create emotionally-driven, technically sound animations and transitions. Provides timing, easing, choreography, and Disney animation principles adapted for UI. Use when creating animations, transitions, micro-interactions, loading states, page transitions, scroll-triggered effects…

starc007/ui-components

Skill Claude CodeCodex

Choose, inspect, install, and compose licensed beUI Pro premium React blocks from the authenticated shadcn registry. Use when building or improving landing pages with beUI Pro, installing @beui-pro items, selecting premium heroes, features, pricing, social proof, CTAs, navigation, footers, or other page sections, or…