design▌

Modern framework patterns for building reusable, maintainable UI components across React, Vue, and Svelte. \n \n Covers three composition strategies: compound components, render props, and slots, with framework-specific examples and use cases \n Compares five CSS-in-JS solutions (Tailwind, CSS Modules, styled-components, Emotion, Vanilla Extract) with guidance on when to use each \n Includes component API design principles, accessibility best practices, and patterns for controlled/uncontrolled c

Microinteractions, motion design, and state transitions that enhance UI polish and user feedback. \n \n Covers timing guidelines (100ms to 500ms+), easing functions, and purposeful motion principles for feedback, orientation, and focus \n Includes patterns for loading states, skeleton screens, progress indicators, toggles, page transitions, ripple effects, and swipe gestures \n Provides CSS keyframe animations and transition examples alongside Framer Motion implementations for React \n Built-in

Cross-platform mobile apps with React Native styling, navigation, and performant Reanimated animations. \n \n Covers StyleSheet patterns, dynamic styling, Flexbox layouts, and platform-specific designs for iOS and Android \n Includes React Navigation 6+ setup for stack and tab navigators with type-safe route definitions \n Provides Reanimated 3 fundamentals including shared values, animated styles, and Gesture Handler integration for drag interactions \n Features best practices for performance (

本 Skills 提供了一套工业级标准的 UI 设计规范，用于 Pencil MCP 设计工作。

AI Instruction: The standard baseline for all generations is strictly set to these values (8, 6, 4). Do not ask the user to edit this file. Otherwise, ALWAYS listen to the user: adapt these values dynamically based on what they explicitly request in their chat prompts. Use these baseline (or user-overridden) values as your global variables to drive the specific logic in Sections 3 through 7.

Create, edit, read, and manipulate PowerPoint presentations with design guidance and quality assurance workflows. \n \n Supports three primary workflows: reading/extracting text from existing .pptx files, editing presentations via template unpacking and repacking, and creating decks from scratch using PptxGenJS \n Includes 10 curated color palettes and typography pairings designed to avoid generic AI aesthetics, plus layout patterns (two-column, icon rows, grids, half-bleed images) with specific

Use this skill to design and review Swift APIs that are clear at the point of use, fluent in call sites, and aligned with established Swift naming and labeling conventions. Prioritize readability, explicit intent, and consistency across declarations, call sites, and documentation comments.

Maintain consistent character appearance across AI-generated images using reference sheets and detailed descriptions. \n \n Create turnaround sheets (front, 3/4, side, back views), expression sheets (6+ emotions), outfit variations, and color palettes to document character design \n Use a 50+ word detailed description anchor reused exactly in every prompt as the most practical consistency technique for small projects \n Train character-specific LoRA models for projects requiring many images, wit

Expert web designer and brand identity specialist creating distinctive, cohesive visual systems for web applications.

Research a codebase and produce an architectural document describing how features or systems work. The output is a markdown file organized for both human readers and future AI agents.