docs: Enhance pencil-design skill documentation by clarifying common mistakes, adding security considerations, and including new MAUI and Swift UI skill references.

.agent/skills/pencil-design/SKILL.md

@@ -223,7 +223,9 @@ python3 scripts/extract-atomic.py
 
 ## Common Mistakes / Lỗi Thường Gặp
 
-### 1. Skipping Design Tokens
+### 1. Hardcoding Colors
+**Problem**: Using hex codes directly in components (e.g. `#000000`), making theming impossible.
+**Solution**: Always use design token variables.
 
 ```css
 /* ❌ BAD: Hardcoded colors */
@@ -233,7 +235,9 @@ background: #0A0A0B;
 background: var(--bg-page);
 ```
 
-### 2. Not Handling Refs
+### 2. Ignoring Referencing System
+**Problem**: Treating `ref` elements as normal frames, losing link to main component.
+**Solution**: Resolve `ref` by looking up the component ID.
 
 ```javascript
 // ❌ BAD: Skip ref elements
@@ -246,20 +250,22 @@ if (element.type === 'ref') {
 }
 ```
 
-### 3. Forgetting to Build Before Testing
+### 3. Modifying Source Files Directly
+**Problem**: Open and editing partial files in `src/` without building, causing "Missing Component" errors in Pencil.
+**Solution**: Always run build script before opening in Pencil.
 
 ```bash
 # ❌ BAD: Open source files directly
 open src/pages/desktop-home.pen
-# → Component refs won't display
 
 # ✅ GOOD: Build first
 python3 scripts/build.py -m
 open tPOS.pen
-# → All components resolved
 ```
 
-### 4. Hardcoding Instead of Using Variables
+### 4. Direct Value Usage
+**Problem**: Using numeric values for spacing/fontsize, breaking design system consistency.
+**Solution**: Use semantic variables.
 
 ```json
 // ❌ BAD: Direct values
@@ -328,6 +334,12 @@ open tPOS.pen
 | **Organisms** | Complex sections | Cards, navigation, headers |
 | **Pages** | Complete layouts | Home, dashboard, login |
 
+## Security Considerations
+
+1. **Script Execution**: Build scripts (`scripts/build.py`, `scripts/extract-atomic.py`) run on your local machine. Ensure you understand what they do before running usage commands.
+2. **File Overwrite**: Automated extraction scripts may overwrite existing files in `src/`. Always use version control (Git) to protect your work.
+3. **External Resources**: Be cautious when importing Pencil collections from untrusted sources.
+
 ## Resources / Tài Nguyên
 
 ### Detailed References
@@ -342,6 +354,8 @@ open tPOS.pen
 - [Tailwind Design System](../tailwind-design-system/SKILL.md) - CSS framework integration
 - [React UI Components](../react-ui-components/SKILL.md) - React component patterns
 - [Blazor Theme Patterns](../blazor-theme-patterns/SKILL.md) - Blazor theming
+- [MAUI Branding Expert](../maui-branding-expert/SKILL.md) - Mobile UI/UX standards
+- [Swift UI Components](../swift-ui-components/SKILL.md) - iOS component patterns
 
 ### Workflows
 

.agent/skills/pencil-design/references/CODE_CONVERSION.md

@@ -614,3 +614,5 @@ console.log('✅ Conversion complete!');
 - [Tailwind Design System](../tailwind-design-system/SKILL.md)
 - [React UI Components](../react-ui-components/SKILL.md)
 - [Blazor Theme Patterns](../blazor-theme-patterns/SKILL.md)
+- [MAUI Branding Expert](../maui-branding-expert/SKILL.md)
+- [Swift UI Components](../swift-ui-components/SKILL.md)