SkillDesign
Tailwind CSS Patterns (v4 - 2025)
Tailwind CSS v4 principles. CSS-first configuration, container queries,
✳Claude Code>_Codex↗Cursor+2
By darthlinuxerOriginal project
1 GitHub starsGPL-3.0-only · FreeView skill
FREE RESOURCE LIBRARYAI prompts and
AI prompts and
agent skills.
Browse reusable instructions for your AI tools. Copy and customize a prompt, or download a skill for a supported agent.
108 prompts44951 skills6 platforms
Browse resources 
BROWSE RESOURCES
Prompts and skills1358 resources
SkillDesign
UI Styling Skill
Create beautiful, accessible user interfaces with shadcn/ui components
✳Claude Code>_Codex◈OpenClaw+2
By darthlinuxerOriginal project
1 GitHub starsApache-2.0 · FreeView skill
SkillDesign
UI/UX Pro Max
Generate a UI/UX design system using local datasets and scripts. Use
◈OpenClaw
By darthlinuxerOriginal project
1 GitHub starsGPL-3.0-only · FreeView skill
SkillDesign
Accessibility Review
Audit for WCAG 2.1 AA compliance including keyboard navigation, ARIA usage, color contrast, and screen reader support. Use when building UI components, reviewing forms, or checking accessibility of new features.
✳Claude Code↗Cursor◎ChatGPT
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Adding Animations (MANDATORY)
Add micro-interactions and animations using Framer Motion. Use when user asks about animations, transitions, hover effects, or motion design. MANDATORY for every component.
✳Claude Code↗Cursor◎ChatGPT
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Accessibility (WCAG 2.1) Guidelines
WCAG 2.1 accessibility guidelines and implementation patterns. Use when creating UI components, validating color contrast, implementing keyboard navigation, or ensuring screen reader compatibility.
✳Claude Code>_Codex◈OpenClaw+2
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Goal
Rules for designing ADHD-friendly interfaces. Use this when creating or refactoring UI components.
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Apply Theme Skill
Use when applying a brand theme configuration to the app. Reads theme_config.json and updates Dart theme files with new colors, gradients, logos, and animation effects.
◈OpenClaw
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Angular CDK (Component Dev Kit) Skill
Angular Component Dev Kit (CDK) expertise for building custom components with accessibility, overlays, drag-and-drop, virtual scrolling, and layout utilities. Use when creating custom UI components, implementing accessibility features, building overlays/dialogs, virtual scrolling for large lists,...
◈OpenClaw
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Aesthetic System
Actionable design system complementing official frontend-design plugin. The plugin provides philosophy; this skill provides executable patterns. Invoke when: - Building web components, pages, or applications - Designing UI that needs to stand out (not generic) - Implementing visual polish and mi...
✦Gemini
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Arcade Style Check
Validate if new UI components or CSS changes follow the QueryCraft "Arcade Lobby" design system. Use when adding new pages, modifying styles, or when user mentions "디자인 확인해줘", "스타일 가이드".
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
anthropic-frontend-design
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beaut...
◈OpenClaw
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
App Icon Generator
Generate appealing, high-quality iOS and Android app icons following each platform's design guidelines. Handles specifications, safe zones, export formats, and platform-specific requirements.
✳Claude Code
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
AI Adaptive UX/UI Design Guide
支援 AI 彈性化調整的 UX/UI 設計指南 - 自適應介面、串流回應、載入狀態、對話式 UI
◈OpenClaw
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Icons, Fonts & Assets
Optimization and usage of SVGs, fonts, and static assets.
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
algorithmic-art
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to ...
✳Claude Code>_Codex↗Cursor+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
ARIA Accessibility Implementation Specialist
ARIA accessibility implementation specialist. Ensure screen reader compatibility and WCAG compliance. Actions: implement ARIA attributes, add keyboard navigation, create focus management, build accessible components. Components: dropdown, modal, tabs, carousel, form, menu, tooltip, dialog. Standa...
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Blockbench Plugin Development
Blockbench plugin/extension development for the 3D modeling tool. Use when creating, modifying, or debugging JavaScript plugins for Blockbench including actions, dialogs, panels, menus, toolbars, model manipulation, animation APIs, and custom formats/codecs. Triggers on Blockbench plugin, Blockbe...
◈OpenClaw
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Best Practices Skill
Ensure code and design follow the latest industry standards, premium UI/UX trends, and library documentation.
✳Claude Code>_Codex↗Cursor+2
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Sistema de Diseño SIBA (Bauman)
Sistema de diseño para el ERP SIBA (Sistema Bauman). Debe usarse SIEMPRE al crear o modificar componentes UI, páginas, formularios, o cualquier elemento visual. Garantiza consistencia en colores, tipografía, componentes, responsive y patrones de la aplicación.
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Bootstrap Legacy Patterns
Patterns for maintaining or migrating Bootstrap 3/4/5 projects.
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Atomic Design with Gluestack UI
Enforces atomic design methodology (atoms, molecules, organisms, templates, pages) for React Native/Expo projects using Gluestack UI. This skill should be used when creating new components, validating existing component organization, reviewing component placement decisions, or planning component ...
◈OpenClaw
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
atomic-design
Atomic Design methodology for building scalable component systems
✳Claude Code>_Codex◈OpenClaw+1
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
SkillDesign
Bootstrap Development
Bootstrap development guidelines for responsive layouts, components, and utility-first styling.
✳Claude Code>_Codex◈OpenClaw+2
By David-Li0406Original project
3 GitHub starsApache-2.0 · FreeView skill
No matching resources.
Try another platform, a broader search, or fewer filters.
Explore all resourcesResource formats: Prompts are ready to copy into a conversation. Skills install into the compatible agent shown on their page.
How it worksCONTRIBUTE
Submit a resourceSubmit a prompt or skill
Include the instructions, intended platforms, author, and license. Submissions are reviewed before publication.