ui components skills

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/"…

htmlstreamofficial/preline

Skill Claude CodeCodex

Add, integrate, or build Preline UI components and blocks into HTML files via the Preline MCP server. Use when the user mentions "preline", says "/preline", asks to add a UI component, or requests a Preline block (a ready-made page section) using Preline UI.

htmlstreamofficial/preline

Skill Claude CodeCodex

Generate, preview, save, or validate Preline theme CSS using the bundled local generator in this skill. Use when the user asks to create a new Preline theme, match a brand color, translate a mood into a theme, generate light and dark theme CSS, preview theme output without writing files, or review and fix generated…

spartan-ng/spartan

Skill Claude CodeCodex

Manages spartan/ui, the Angular UI library - adding, composing, fixing, debugging, and styling UI with the Brain (headless primitives) and Helm (styled) layers. Provides project context, component APIs, and usage examples. Applies when working with spartan/ui, @spartan-ng/brain, @spartan-ng/helm, the @spartan-ng/cli…

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…

starc007/ui-components

Skill Claude CodeCodex

Pick and install beUI (@beui) animated React components from the shadcn registry. Use when building motion UI, agent/chat interfaces, toasts, docks, bottom sheets, drawers, popovers, sliders, loaders, 404 pages, or any beui.dev component. Maps user intent to exact @beui install slugs instead of inventing custom…

frappe/frappe-ui

Skill Claude CodeCodex

Build consistent Frappe-style user interfaces using the frappe-ui Vue 3 component library and its design tokens. Use when scaffolding pages, forms, dialogs, lists, or any UI inside a Frappe-based app, when the user mentions frappe-ui, Frappe Cloud / Gameplan / Desk / Drive / Insights styling, or asks to "use frappe-ui…

IgniteUI/igniteui-angular

Skill Claude CodeCodex

Translate Figma app screens designed using the Indigo.Design UI Kits into production Angular applications with Ignite UI for Angular. The Indigo.Design UI Kits are Figma component libraries available in four design-system variants — Material, Fluent, Bootstrap, and Indigo — each with light and dark themes. Designers…

IgniteUI/igniteui-angular

Skill Claude CodeCodex

Implement Angular application views from design images using Ignite UI Angular components. Uses MCP servers (igniteui-cli, igniteui-theming, angular-cli) to discover components, generate themes, and follow best practices. Triggers when the user provides a design image (screenshot, mockup, wireframe) and wants it built…

IgniteUI/igniteui-angular

Skill Claude CodeCodex

Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between…

UI5/webcomponents-react

Skill Claude CodeCodex

Use ALWAYS for AnalyticalTable internals — react-table v7 plugin architecture, vendored react-table code at packages/main/src/components/AnalyticalTable/react-table/, tableHooks, AnalyticalTableHooks, useDynamicColumnWidths, useColumnResizing, useRowSelect, useF2CellEdit, useManualRowSelect…

UI5/webcomponents-react

Skill Claude CodeCodex

Guide a complete UI5 Web Components version upgrade in the ui5-webcomponents-react monorepo. Updates root and peer dependencies, regenerates wrapper components, syncs theming parameters, updates version-info, detects new components and breaking changes, and verifies the build. Use when a new @ui5/webcomponents version…

Khan/wonder-blocks

Skill Claude CodeCodex

Storybook best practices for Wonder Blocks component stories. Use when creating or editing .stories.tsx / .stories.ts files.

Khan/wonder-blocks

Skill Claude CodeCodex

Jest + React Testing Library best practices for Wonder Blocks unit tests. Use when creating or editing .test.ts / .test.tsx files.

Khan/wonder-blocks

Skill Claude CodeCodex

Implements user interfaces using the Wonder Blocks (WB) design system — Khan Academy's React component library. Use this skill whenever the user asks you to build, modify, or review UI components; wants to use or map WB tokens for colors/spacing/typography (including translating Figma designs to WB components and…

maquina-app/maquina_components

Skill Claude CodeCodex

Build consistent, accessible UIs in Rails using maquinacomponents. Use this skill when implementing UI for features, creating views, building forms, or reviewing UI specs. Triggers on view creation, UI implementation, form building, layout design, or mentions of maquinacomponents usage.

persianlabs/ui

Skill Claude CodeCodex

This skill encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great.

tenstorrent/tt-studio

Skill Claude CodeCodex

Make a change in TT-Studio the team way: branch off dev with a / branch, keep the diff minimal and in-scope, verify the running app via its health endpoints before pushing, leave every other branch untouched, and open a PR against dev with a human, professional title and description. Use whenever the user asks to…

tenstorrent/tt-studio

Skill Claude CodeCodex

Review third-party license attribution for TT-Studio when dependencies or bundled assets change, and keep the attribution files in sync. Use when a PR adds/updates a dependency (app/backend/requirements.txt, app/agent, inference-api, docker-control-service, or app/frontend/package.json), bundles a binary/model/weights…