partme-ai/pencil-ui-design-system-uviewpro
skills/pencil-skills/pencil-ui-design-system-uviewpro/SKILL.md
Initialize uView Pro design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView Pro or uviewpro, needs to set up uView Pro color palette and typography variables, or wants to create component library frames for Button, Form, Tabs, Navbar, and other uView Pro components.
$ install --global
skillsauthnpx skillsauth add partme-ai/full-stack-skills pencil-ui-design-system-uviewproInstall 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:04 AM38.5s6 files scanned
SKILL.md
- name:
- pencil-ui-design-system-uviewpro
- description:
- Initialize uView Pro design tokens and component overview frames in a Pencil .pen file. Use when the user mentions Pencil with uView Pro or uviewpro, needs to set up uView Pro color palette and typography variables, or wants to create component library frames for Button, Form, Tabs, Navbar, and other uView Pro components.
- license:
- Complete terms in LICENSE.txt
uView Pro Design System Initializer
Constraint: Only use this skill when the user explicitly mentions "Pencil" and "uView Pro" (or "uviewpro") or when orchestrating a Pencil design system initialization task.
When to use this skill
Use this skill when:
- The user wants to initialize uView Pro tokens (primary, error, warning, success colors) in a Pencil .pen file
- The user needs a component overview frame for uView Pro components in Pencil
- The user mentions "Pencil" together with "uView Pro", "uviewpro", or uView Pro-specific components (Button, Form, Tabs, Navbar)
- An orchestrator skill (pencil-ui-designer) routes a uView Pro 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 the following uView Pro design tokens. Follow .pen file schema; variable names are arbitrary strings.
Primary Colors (Blue)
u-type-primary:#2979ffu-type-primary-dark:#2b85e4u-type-primary-disabled:#a0cfffu-type-primary-light:#ecf5ff
Error Colors (Red)
u-type-error:#fa3534u-type-error-dark:#dd6161u-type-error-disabled:#fab6b6u-type-error-light:#fef0f0
Warning Colors (Yellow)
u-type-warning:#ff9900u-type-warning-dark:#f29100u-type-warning-disabled:#fcbd71u-type-warning-light:#fdf6ec
Success Colors (Green)
u-type-success:#19be6bu-type-success-dark:#18b566u-type-success-disabled:#71d5a1u-type-success-light:#dbf1e1
Info Colors (Gray)
u-type-info:#909399u-type-info-dark:#82848au-type-info-disabled:#c8c9ccu-type-info-light:#f4f4f5
Text Colors
u-main-color:#303133(Main Text)u-content-color:#606266(Content Text)u-tips-color:#909399(Tips/Secondary)u-light-color:#c0c4cc(Placeholder)
Background & Border
u-bg-color:#f3f4f6u-border-color:#e4e7ed
Font Sizes (px)
u-font-xs:12px(24rpx)u-font-sm:13px(26rpx)u-font-md:14px(28rpx)u-font-lg:15px(30rpx)u-font-xl:16px(32rpx)
Border Radius
u-radius:4px(8rpx)u-radius-lg:8px(16rpx)u-radius-circle:9999px
Step 2: Create Component Overview Structure (batch_design)
Use mcp__pencil__batch_design to create a "Components Overview" frame containing the following sections (Frames) based on uView Pro documentation:
- Basic Components (基础组件)
- Color, Icon, Image, Button, Layout, Cell, Badge, Tag, Text, Fab, Transition, TodoRootPortal, ConfigProvider
- Form Components (表单组件)
- Form, Input, Textarea, Calendar, Select, Keyboard, Picker, Rate, Search, NumberBox, Upload, VerificationCode, Field, Checkbox, Radio, Switch, Slider
- Data Components (数据组件)
- CircleProgress, LineProgress, Table, CountDown, CountTo
- Feedback Components (反馈组件)
- ActionSheet, AlertTips, Toast, NoticeBar, TopTips, Collapse, Popup, SwipeAction, Modal, FullScreen
- Layout Components (布局组件)
- Line, Card, Mask, NoNetwork, Grid, Swiper, TimeLine, Skeleton, Sticky, Waterfall, Divider
- Navigation Components (导航组件)
- Dropdown, Tabbar, BackTop, Navbar, Tabs, TabsSwiper, Subsection, IndexList, Steps, Empty, Link, Section, Pagination
- Other Components (其他组件)
- MessageInput, Loadmore, TodoReadMore, LazyLoad, Gap, Avatar, Loading, LoadingPopup, safeAreaInset
Organize component frames using Auto Layout. Keep each batch_design call to maximum 25 operations; split by logical sections if needed.
Example: Initialize uView Pro Variables
{
"name": "set_variables",
"arguments": {
"filePath": "designs/app.pen",
"replace": false,
"variables": {
"u-type-primary": "#2979ff",
"u-type-error": "#fa3534",
"u-type-warning": "#ff9900",
"u-type-success": "#19be6b",
"u-main-color": "#303133",
"u-bg-color": "#f3f4f6",
"u-border-color": "#e4e7ed",
"u-font-md": "14px"
}
}
}
Best Practices
- Always verify color values against the latest uView Pro documentation if unsure.
- Use
set_variableswithreplace: falseto merge into existing variables unless a full reset is requested. - Organize component frames using Auto Layout for easy expansion.
- Keep each
batch_designcall to maximum 25 operations; split by category if needed.
Keywords
pencil, uviewpro, uview pro, 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 or usage.references/components.md– Component specifications.
Related Skills
partme-ai/uniapp-project
development
VerifiedTrustedCommunity
Provides per-component and per-API examples with cross-platform compatibility details for uni-app, covering built-in components, uni-ui components, and APIs (network, storage, device, UI, navigation, media). Use when the user needs official uni-app components or APIs, wants per-component examples with doc links, or needs platform compatibility checks.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-project-creator
tools
VerifiedTrustedCommunity
Creates new uni-app projects via the official CLI or HBuilderX with Vue 2/Vue 3 template selection, manifest.json and pages.json configuration, and directory structure setup. Use when the user wants to scaffold a new uni-app project, initialize project files with a single command, or set up the development environment.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-plugin
tools
VerifiedTrustedCommunity
Browses, installs, configures, and manages plugins from the uni-app plugin market (ext.dcloud.net.cn) including component plugins, API plugins, and template plugins with dependency handling. Use when the user needs to find and install uni-app plugins, configure plugin settings, manage plugin dependencies, or integrate third-party components.
456SKILL.mdUpdated Jun 4, 2026
partme-ai/uniapp-native-plugin
tools
VerifiedTrustedCommunity
Develops native Android and iOS plugins for uni-app including module creation, JavaScript-to-native communication, and plugin packaging for distribution. Use when the user needs to build custom native modules, extend uni-app with native capabilities (camera, Bluetooth, sensors), or create publishable native plugins.
456SKILL.mdUpdated Jun 4, 2026