- Home
- /
- Categories
- /
- UI Components
UI Components
Code-based UI component generation and styling
brainstorming
by liuchiawei
Use this skill before any creative or constructive work (features, components, architecture, behavior changes, or functionality). This skill transforms vague ideas into validated designs through disciplined, incremental reasoning and collaboration.
code-refactoring-refactor-clean
by liuchiawei
"You are a code refactoring expert specializing in clean code principles, SOLID design patterns, and modern software engineering best practices. Analyze and refactor the provided code to improve its quality, maintainability, and performance."
installing-brand-design-skills
by planetabhi
Helps Claude install and use brand-specific design skills for popular product brands (Apple, Linear, Stripe, Shopify, Notion, Figma, Spotify, Slack, Discord, IBM, Salesforce) by running the design-like CLI to generate Agent Skills and IDE configuration so code and UI match the chosen brand’s design language.
Oracle Solution Design Orchestrator
by oci-ai-architects
Version: 1.0 Created: 2026-02-09 Replaces: claude-flow swarm orchestration
commit-style-enforcer
by viteinfinite
Use when creating git commits. Learns repository-specific commit style patterns from history, caches them, and enforces consistency.
sqlite-best-practices
by erayack
SQLite performance optimization, configuration, and best practices. Use this skill when writing, reviewing, or optimizing SQLite queries, schema designs, or database configurations.
technical-writing
by tenzir
Write clear technical documentation following Google's style guide. Use when writing docs, README files, API documentation, code comments, user guides, or asking about documentation style.
effectorjs
by aiko-atami
Design, refactor, and review Effector state management using modern v23+ patterns. Use when tasks involve createStore/createEvent/createEffect modeling, dataflow with sample/attach/split, scope-safe SSR with fork/allSettled/serialize/hydrate, React integration with useUnit, Solid/Vue integration patterns, fixing scope loss, or replacing anti-patterns such as business logic in watch, imperative calls in effects, and direct getState business reads.
best-practices-researcher
by carmandale
Researches and synthesizes external best practices, documentation, and examples for any technology or framework. Use when you need industry standards, community conventions, or implementation guidance.
openapi-spec-design-first-apis
by Agentient
[STUB - Not implemented] OpenAPI 3.1.0 design-first API specifications as single source of truth. PROACTIVELY activate for: [TODO: Define on implementation]. Triggers: [TODO: Define on implementation]
start-app
by alfredang
Auto-detect project type and start any app on localhost. Finds an available port with no conflicts, detects the right start command, and launches the dev server. Use when running "start app", "run the app", "start the server", or any local development server task.
c4-model-architecture-diagrams
by Agentient
[STUB - Not implemented] C4 model diagrams for layered architecture visualization (Context, Container, Component, Code). PROACTIVELY activate for: [TODO: Define on implementation]. Triggers: [TODO: Define on implementation]
claude-command-feature-dev-feature-dev
by monkey1sai
Converted from Claude plugin command "feature-dev" (feature-dev). Use
deno-frontend
by donjo
Use when building web UIs with Fresh framework, using Preact components, or adding Tailwind CSS styling in Deno
The Agile Rebrand Protocol
by Coowoolf
105 Product Management Skills extracted from Lenny's Podcast - For use with Claude Code / Cursor / Windsurf
frontend-react
by kieutrongthien
Build, maintain, and debug React frontends (TypeScript, Vite or CRA).
solid-development
by amorriscode
SolidJS patterns, reactivity model, and best practices. Use when writing Solid components, reviewing Solid code, or debugging Solid issues.
ink
by georg-unterholzner
Build CLI applications using React. Use when creating terminal UIs, handling keyboard input, or building interactive command-line tools with React components. Supports flexbox layouts, text styling, focus management, and accessibility.
python-fastapi-ddd-skill
by iktakahiro
Guides FastAPI backend design using Domain-Driven Design (DDD) and Onion Architecture in Python. Use when structuring a FastAPI app (routes/handlers, Pydantic schemas, Depends-based DI), modeling domain Entities/Value Objects, defining repository interfaces, implementing SQLAlchemy infrastructure adapters, or writing use cases, based on the dddpy reference.
skill-creator
by ks6088ts-labs
効果的なスキルを作成するためのガイド。このスキルは、ユーザーがAIエージェントの機能を専門知識、ワークフロー、またはツール統合で拡張する新しいスキルを作成(または既存のスキルを更新)したい場合に使用します。
prototype
by graemerycyk
"Generate a standalone interactive HTML prototype from a PRD or feature description. Use when a PM needs help with prototype generation."
git-review
by jssfy
分析指定时间范围内的 git 提交,生成工作复盘报告。触发词:复盘、review commits、git回顾、今天做了什么、工作总结、daily review、retrospective
translate
by clearsmog
Multi-format document translation. Supports Typst ↔ Quarto. For Beamer translations, configure at project level.
ui-ux
by kieutrongthien
"UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 9 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind, shadcn/ui). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient. Integrations: shadcn/ui MCP for component search and examples."