luisdavidtf/fontstock-ui
skills/fontstock-ui/SKILL.md
FontStock UI guidelines (Paper theme, reusable components, Lucide icons). Trigger: When creating screens, components, or styling UI elements.
testing
Updated Jun 8, 2026
$ install --global
skillsauthnpx skillsauth add luisdavidtf/vindex fontstock-uiInstall 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: Jun 8, 2026, 6:09 AM7.3s1 file scanned
SKILL.md
- name:
- fontstock-ui
- description:
- >
- Trigger:
- When creating screens, components, or styling UI elements.
- license:
- Apache-2.0
- author:
- fontstock-arch
- version:
- 1.0
- scope:
- [ui]
- allowed-tools:
- Read, Edit, Write, Glob, Grep, Bash, WebFetch, WebSearch, Task
Core Principles
- Material Design 3: Leveraging
react-native-paperfor all core components. - Consistency: Use the
src/presentation/theme/definitions. - Icons: Use
lucide-react-nativefor all icons.
CRITICAL RULES
1. Theming
- ALWAYS use
useThemehook to access colors. - NEVER hardcode colors.
const theme = useTheme();
<Text style={{ color: theme.colors.primary }}>Hello</Text>
2. Components
- ALWAYS prefer Paper components (
Button,Card,TextInput) over raw React Native ones unless customizing heavily. - ALWAYS place reusable UI components in
src/presentation/components/ui/.
3. Icons
- ALWAYS use
lucide-react-native. - Size: Default to
size={24}unless specified. - Color: Use theme colors.
import { Box } from 'lucide-react-native';
<Box color={theme.colors.onSurface} size={24} />
4. Layout
- Spacing: Use multiples of 4 or 8 (e.g., 4, 8, 16, 24, 32).
- Typography: Use standard variants:
displayLarge,headlineMedium,bodyMedium,labelSmall.
Related Skills
luisdavidtf/zustand-store
documentation
VerifiedTrustedCommunity
Guidelines for global state management with Zustand. Trigger: When creating global stores, shared UI state, or managing session data.
SKILL.mdUpdated Jun 8, 2026
luisdavidtf/typescript
development
VerifiedTrustedCommunity
TypeScript strict patterns and best practices. Trigger: When implementing or refactoring TypeScript in .ts/.tsx (types, interfaces, generics, const maps, type guards, removing any, tightening unknown).
SKILL.mdUpdated Jun 8, 2026
luisdavidtf/react-native-style
development
VerifiedTrustedCommunity
Guidelines for styling in React Native (Flexbox, StyleSheet). Trigger: When styling components, fixing layout issues, or adding visual effects.
SKILL.mdUpdated Jun 8, 2026
luisdavidtf/learning-loop
testing
VerifiedTrustedCommunity
Protocol for QA, error verification, and skill evolution to prevent recurring bugs.
SKILL.mdUpdated Jun 8, 2026