- Home
- /
- Categories
- /
- UI Components
UI Components
Code-based UI component generation and styling
workflow-project-intake
by Heyvhuang
"Use when you need to clarify requirements and route to the right workflow (idea → executable input). Project intake + routing: help the user brainstorm and clarify intent, persist goal/context artifacts, then dispatch to the right workflow or step skill. Default route is workflow-ship-faster (Next.js 16.1.1) for idea/prototype→launch. Triggers: project kickoff, requirements clarification, brainstorm, ideas, discovery, intake."
claudability-analyzer
by aviz85
"Analyzes professions/jobs for Claude Code automation opportunities. Triggers: 'how can Claude help me', 'what can Claude do for', 'I'm a [profession]', 'help me as a [job]', 'I work as', describing their work + asking about Claude. Use whenever user mentions their profession/role and wants to discover what Claude can automate."
page-gen
by ZhihaoAIRobotic
Generate an academic paper project webpage from PDF using parse_paper, match_template, render_html, review_html_visual, and extract_table_html.
api-patterns
by hainamchung
API design principles and decision-making. REST vs GraphQL vs tRPC selection, response formats, versioning, pagination.
api-designer
by hainamchung
Use when designing REST or GraphQL APIs, creating OpenAPI specifications, or planning API architecture. Invoke for resource modeling, versioning strategies, pagination patterns, error handling standards.
universal-mindset
by dylantarre
Use when approaching any animation task—establishing foundational thinking patterns, teaching animation principles, or when none of the specialized thinking styles quite fit the situation.
Animation Principles - Universal Reference
by dylantarre
Use when discussing animation principles with users of unknown skill level, or when providing a balanced reference that works for any experience level
tailwind-4-docs
by Lombiq
Comprehensive Tailwind CSS v4 documentation snapshot and workflow guidance. Use when answering Tailwind v4 questions, selecting utilities/variants, configuring Tailwind v4, or migrating projects from v3 to v4 with official docs and gotcha checks.
universal-practitioner
by dylantarre
Use when applying animation principles in any context, for any role, or when a general understanding of Disney's 12 principles is needed.
accessible-motion
by dylantarre
Use when implementing reduced motion alternatives, vestibular-safe animations, WCAG compliance, or designing for users with motion sensitivity.
3d-spatial
by dylantarre
Use when working in Blender, Unity 3D, Unreal Engine, Cinema 4D, VR/AR applications, or any three-dimensional animation work.
brand-strategist
by dylantarre
Use when defining brand motion identity, creating animation guidelines for brand expression, or aligning animation with brand personality.
attention-grabbers
by dylantarre
Use when drawing user focus - notification badges, new feature highlights, error callouts, promotional banners, or any animation meant to attract attention.
Animation Principles - Refresher
by dylantarre
Use when an experienced animator needs a quick reminder of the 12 principles without basic explanations
animator-traditional
by dylantarre
Use when creating hand-drawn or classical animation, working with frame-by-frame techniques, or applying Disney principles in their original artistic context.
Animation Principles - Troubleshooting
by dylantarre
Use when animation feels wrong and you need to diagnose which principle is failing or being misapplied
character-appeal
by dylantarre
Use when creating or animating characters that need to connect with audiences—hero protagonists, memorable villains, lovable sidekicks, or any figure that must have personality and presence.
fal-video-to-video
by JosiahSiegel
Complete fal.ai video-to-video system. PROACTIVELY activate for: (1) Kling O1 video editing, (2) Sora Remix transformation, (3) Video upscaling, (4) Frame interpolation, (5) Style transfer (anime, painting), (6) Object replacement/removal, (7) Color correction, (8) Video enhancement pipelines. Provides: Edit types (general/style/object), upscaling options, style keywords, enhancement workflows. Ensures consistent video transformation without flickering.
generic-code-reviewer
by travisjneuman
Review code for bugs, security vulnerabilities, performance issues, accessibility gaps, and CLAUDE.md workflow compliance. Supports any tech stack - HTML/CSS/JS, React, TypeScript, Node.js, Python, NestJS, Next.js, and more. Use when completing features, before commits, or reviewing pull requests.
bun-package-manager
by TheBushidoCollective
Use when managing dependencies with Bun's package manager. Covers installing packages, workspaces, lockfiles, and migrating from npm/yarn/pnpm to Bun.
cocoapods-subspecs-organization
by TheBushidoCollective
Use when organizing complex CocoaPods libraries into subspecs. Covers modular architecture, dependency management between subspecs, and default subspecs patterns for better code organization and optional features.
ansible-inventory
by TheBushidoCollective
Use when managing hosts and groups in Ansible inventory for organizing infrastructure and applying configurations across environments.
ansible-roles
by TheBushidoCollective
Use when structuring and reusing code with Ansible roles for modular, maintainable automation and configuration management.
design-systems
by liqiongyu
"Build or evolve a design system by producing a Design System Operating Pack: charter, token model (incl. depth/elevation), component inventory + roadmap, blockframe-to-component mapping, documentation plan, and governance/adoption plan. Use for design systems, component libraries, design tokens, UI kits, and pattern libraries."