teachingai/pencil-ui-design-system-uview
skills/pencil-skills/pencil-ui-design-system-uview/SKILL.md
Initialize uView 2.x design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView 2.x (not uView Pro), needs to set up uView color palette and typography variables, or wants to create component library frames for Button, Form, Cell, Tabs, and other uView components.
$ install --global
skillsauthnpx skillsauth add teachingai/agent-skills pencil-ui-design-system-uviewInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Apr 10, 2026, 9:03 AM11.9s6 files scanned
SKILL.md
- name:
- pencil-ui-design-system-uview
- description:
- Initialize uView 2.x design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView 2.x (not uView Pro), needs to set up uView color palette and typography variables, or wants to create component library frames for Button, Form, Cell, Tabs, and other uView components.
- license:
- Complete terms in LICENSE.txt
uView Design System Initializer
Constraint: Only use this skill when the user explicitly mentions "Pencil" and "uView" (2.x, not uView Pro) or when orchestrating a Pencil design system initialization task.
When to use this skill
Use this skill when:
- The user wants to initialize uView 2.x tokens (primary, success, warning, error colors) in a Pencil .pen file
- The user needs a component overview frame for uView 2.x components in Pencil
- The user mentions "Pencil" together with "uView" (2.x, not Pro) or uView-specific components (Button, Cell, Tabs, Navbar)
- An orchestrator skill (pencil-ui-designer) routes a uView 2.x initialization request
How to use this skill
This skill outputs a PENCIL_PLAN. The Agent then calls Pencil MCP tools in order: open_document, set_variables, batch_design, optionally get_screenshot.
Step 1: Initialize Variables (set_variables)
Use mcp__pencil__set_variables to register uView 2.x design tokens. Follow .pen file schema.
Primary / Semantic
u-type-primary:#3c9cffu-type-success:#5ac725u-type-warning:#f9ae3du-type-error:#f56c6cu-type-info:#909399
Text & Border
u-main-color:#303133u-content-color:#606266u-tips-color:#909399u-border-color:#e4e7edu-radius:4px
Font
u-font-size-base:14px(28rpx)
Fill from uView 2.x docs if more tokens are needed.
Step 2: Create Component Overview Structure (batch_design)
Use mcp__pencil__batch_design to create a "Components Overview" frame with sections based on uView 2.x documentation:
- Basic (基础)
- Icon, Button, Layout, Cell, Badge, Tag
- Form (表单)
- Form, Input, Textarea, Radio, Checkbox, Switch, Rate, Upload, Picker, Select, DatetimePicker, Search, NumberBox, CodeInput
- Data (数据)
- Table, List, Calendar, CountDown, CountTo, Progress, CircleProgress
- Feedback (反馈)
- ActionSheet, Modal, Toast, Notify, SwipeAction, Collapse, Popup
- Layout (布局)
- Grid, Divider, Sticky, IndexList, Swiper, Waterfall
- Navigation (导航)
- Navbar, Tabbar, Tabs, BackTop, Link, Section
Organize frames using Auto Layout. Keep each batch_design call to maximum 25 operations.
Example: Initialize uView 2.x Variables
{
"name": "set_variables",
"arguments": {
"filePath": "designs/app.pen",
"replace": false,
"variables": {
"u-type-primary": "#3c9cff",
"u-type-success": "#5ac725",
"u-type-warning": "#f9ae3d",
"u-type-error": "#f56c6c",
"u-main-color": "#303133",
"u-border-color": "#e4e7ed",
"u-font-size-base": "14px"
}
}
}
Best Practices
- Verify token values against uView 2.x documentation (distinct from uView Pro).
- Use
set_variableswithreplace: falseunless a full reset is requested. - Use Auto Layout for component overview frames.
- Keep each
batch_designcall to maximum 25 operations; split by category if needed.
Keywords
pencil, uview, uview 2, design system, init, variables, components
References
references/contract.md– Design tokens and component naming.references/official.md– Link to official documentation.references/examples.md– Example PENCIL_PLAN.references/components.md– Component specifications.
Related Skills
teachingai/nextjs
development
VerifiedTrustedCommunity
Guidance for Next.js using the official docs at nextjs.org/docs. Use when the user needs Next.js concepts, configuration, routing, data fetching, or API reference details.
284SKILL.mdUpdated Apr 14, 2026
teachingai/flask
tools
VerifiedTrustedCommunity
Provides comprehensive guidance for Flask framework including routing, templates, forms, database integration, extensions, and deployment. Use when the user asks about Flask, needs to create web applications, implement routes, or build Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/fastapi
development
VerifiedTrustedCommunity
Provides comprehensive guidance for FastAPI framework including routing, request validation, dependency injection, async operations, OpenAPI documentation, and database integration. Use when the user asks about FastAPI, needs to create REST APIs, or build high-performance Python web services.
284SKILL.mdUpdated Apr 14, 2026
teachingai/django
development
VerifiedTrustedCommunity
Provides comprehensive guidance for Django framework including models, views, templates, forms, admin, REST framework, and deployment. Use when the user asks about Django, needs to create web applications, implement models and views, or build Django REST APIs.
284SKILL.mdUpdated Apr 14, 2026