Skills
.Work. You
Rest

pencil-design-restoration

Community

Restore Pencil designs into Flutter safely.

Design & Creative#theming#mcp#flutter#pen#pencil#design-restoration
Authorweberwang
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill helps engineers and designers restore Pencil design narratives into Flutter by mapping design tokens, layout semantics, and component patterns from Pencil MCP into the Flutter repo, ensuring consistency with the existing theme and shared widgets.

Core Features & Use Cases

  • Theme-aware restoration: aligns colors, typography, spacing, and container styles to the project's theme before rebuilding pages or components.
  • Safe structural mapping: guides mapping of Pencil frames into fixed regions, main content, and overlays to avoid over-scrolling or incorrect widget trees.
  • Design-to-code testing: validates placeholder content, mocks, and repeated patterns to prevent mirroring demo data as final UI.

Quick Start

Restore the target .pen to Flutter by mapping tokens to the existing theme and then rebuilding the selected scope (design, page, or a component) with Pencil MCP.

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: pencil-design-restoration
Download link: https://github.com/weberwang/flutter_impeccable/archive/main.zip#pencil-design-restoration

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 510,000+ vetted skills library on demand.