UI Components
Code-based UI component generation and styling
styleguide
by ReinaMacCredy
Detect project languages and inject code style guides into CLAUDE.md. Provides consistent coding conventions for all Claude Code interactions.
req-change-workflow
by yunshu0909
Standardize requirement/feature changes in an existing codebase (especially Chrome extensions) by turning "改需求/需求变更/调整交互/改功能/重构流程" into a repeatable loop: clarify acceptance criteria, confirm current behavior from code, assess impact/risk, design the new logic, implement with small diffs, run a fixed regression checklist, and update docs/decision log. Use when the user feels the change process is chaotic, when edits tend to sprawl across files, or when changes touch manifest/service worker/OAuth/storage/UI and need reliable verification + rollback planning.
htmlcsstoimage
by vm0-ai
HTMLCSStoImage API via curl. Use this skill to generate images from HTML/CSS or capture screenshots of web pages.
pdforge
by vm0-ai
PDForge (PDF Noodle) API for generating PDFs from templates or HTML via curl.
ui-design
by yunshu0909
UI 样式修改协作流程。当用户要求修改页面样式、调整布局、改 UI 细节时使用。通过"截图定位 → 现状描述 → 方案选择 → 改代码 → 微调"的结构化流程，减少沟通偏差，避免浪费 token。
thinking-partner
by yunshu0909
思考拍档 - 陪你从混沌中理清局面，锁定核心问题，拆解卡点，共创解法，落地行动
prd-doc-writer
by yunshu0909
Write and iteratively refine PRD/需求文档 with a story-driven structure and strict staged confirmations (journey map alignment, per-story single-point confirmation, final generation gate). Use when the user asks to 梳理/撰写/完善 PRD、需求文档、用户故事、验收标准，并希望用 ASCII 线框图与 Mermaid（流程图/状态图/时序图）来减少歧义、共同完成文档。
ring:dev-refactor-frontend
by LerianStudio
Analyzes frontend codebase against Ring standards and generates refactoring tasks for ring:dev-cycle-frontend. Dispatches frontend-specific agents in ANALYSIS mode.
development-pipeline
by popup-studio-ai
9-phase Development Pipeline complete knowledge. Use when user doesn't know development order or starts a new project from scratch. Use proactively when user asks about development order, phases, what to do first, or starts a new project without clear direction. Triggers: development pipeline, phase, development order, where to start, what to do first, how to begin, new project, 개발 파이프라인, 뭐부터, 어디서부터, 순서, 시작, 開発パイプライン, 何から, どこから, 开发流程, 从哪里开始, pipeline de desarrollo, fase, orden de desarrollo, por dónde empezar, qué hacer primero, pipeline de développement, phase, ordre de développement, par où commencer, que faire d'abord, Entwicklungspipeline, Phase, Entwicklungsreihenfolge, wo anfangen, was zuerst tun, pipeline di sviluppo, fase, ordine di sviluppo, da dove iniziare, cosa fare prima Do NOT use for: ongoing implementation, existing feature work, or bug fixes.
ai-model-web
by TencentCloudBase
"Use this skill when a browser/Web app (React, Vue, Angular, Next, Nuxt, static sites, SPAs, dashboards, AI chat UI) needs AI models via @cloudbase/js-sdk. Default routing for page/页面/Web/前端/frontend/网页/H5 AI — call directly from browser, do NOT propose a Node.js proxy. Covers generateText and streamText. Models via ai.createModel with groups cloudbase, hunyuan-exp, or custom-*. Model IDs (deepseek-v4-flash, deepseek-v3.2, hunyuan-2.0-instruct-20251111, glm-5, kimi-k2.6) go in the model field. MUST run two-step preflight before code — see body. Keywords: 页面, Web, 前端, React, Vue, Next, Nuxt, SPA, AI chat UI, generateText, streamText, createModel, hunyuan-exp, Token Credits, TokenHub, Hunyuan, DeepSeek, GLM, Kimi, MiniMax. NOT for Node.js backend (use ai-model-nodejs), Mini Program (use ai-model-wechat), or image generation (Node SDK only)."
cloudbase-guidelines
by TencentCloudBase
Essential CloudBase (TCB, Tencent CloudBase, 云开发, 微信云开发) development guidelines. MUST read when working with CloudBase projects, developing web apps, mini programs, or backend services using CloudBase platform.
webf-native-ui-dev
by openwebf
Develop custom native UI libraries based on Flutter widgets for WebF. Create reusable component libraries that wrap Flutter widgets as web-accessible custom elements. Use when building UI libraries, wrapping Flutter packages, or creating native component systems.
webf-api-compatibility
by openwebf
Check Web API and CSS feature compatibility in WebF - determine what JavaScript APIs, DOM methods, CSS properties, and layout modes are supported. Use when planning features, debugging why APIs don't work, or finding alternatives for unsupported features like IndexedDB, WebGL, float layout, or CSS Grid.
webf-quickstart
by openwebf
Get started with WebF development - setup WebF Go, create a React/Vue/Svelte project with Vite, and load your first app. Use when starting a new WebF project, onboarding new developers, or setting up development environment.
webf-native-ui
by openwebf
Setup and use WebF's Cupertino UI library to build native iOS-style UIs with pre-built components instead of crafting everything with HTML/CSS. Use when building iOS apps, adding native UI components, or improving UI performance.
basecamp-automation
by aAAaqwq
Automate Basecamp project management, to-dos, messages, people, and to-do list organization via Rube MCP (Composio). Always search tools first for current schemas.
patent-diagram-generator
by RobThePCGuy
Create patent-style technical diagrams including flowcharts, block diagrams, and system architectures using Graphviz with reference numbering
frontend-excellence
by rohitg00
Modern frontend patterns for React Server Components, performance optimization, and Core Web Vitals
performance-optimization
by rohitg00
Web performance optimization including bundle analysis, lazy loading, caching strategies, and Core Web Vitals
mobile-development
by rohitg00
Mobile development patterns for React Native and Flutter including navigation, state management, and responsive design
weekly-report
by yunshu0909
帮助用户梳理周报，按照完整逻辑展示工作价值和边界。当用户说"写周报"、"周报"、"梳理周报"、"整理工作"时触发。
tailwind-capacitor
by Cap-go
Guide to using Tailwind CSS in Capacitor mobile apps. Covers mobile-first design, touch targets, safe areas, dark mode, and performance optimization. Use this skill when users want to style Capacitor apps with Tailwind.
framework-to-capacitor
by Cap-go
Guide for integrating modern web frameworks with Capacitor. Covers Next.js static export, React, Vue, Angular, Svelte, and others. Use this skill when converting framework apps to mobile apps with Capacitor.
safe-area-handling
by Cap-go
Complete guide to handling safe areas in Capacitor apps for iPhone notch, Dynamic Island, home indicator, and Android cutouts. Covers CSS, JavaScript, and native solutions. Use this skill when users have layout issues on modern devices.