333-333-333/flutter-design-tokens
skills/flutter-design-tokens/SKILL.md
Design tokens for consistent spacing, sizes, and radii across Flutter UI components. Trigger: When creating UI components, reviewing spacing/sizing, or eliminating magic numbers.
testing
Updated Mar 25, 2026
$ install --global
skillsauthnpx skillsauth add 333-333-333/agents flutter-design-tokensInstall 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%
Error
VirusTotalMulti-engine malware detection
70%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Mar 25, 2026, 12:08 PM43.6s3 files scanned
SKILL.md
- name:
- flutter-design-tokens
- description:
- >
- Trigger:
- When creating UI components, reviewing spacing/sizing, or eliminating magic numbers.
- author:
- 333-333-333
- version:
- 1.0
- type:
- project
- scope:
- [mobile]
When to Use
- Creating new widgets or components
- Refactoring existing components to remove magic numbers
- Reviewing PRs for hardcoded spacing/sizing values
- Establishing consistent visual rhythm
Critical Rules
- NEVER use raw numbers for spacing, sizes, or radii — always use tokens
- Import via barrel:
import 'package:bastet/app/theme/tokens.dart'; - Pick semantic tokens that match intent, not just value
Token Classes
| Class | Purpose | Example |
|-------|---------|---------|
| AppSpacing | Padding, margins, gaps | AppSpacing.lg (16px) |
| AppSizes | Icons, buttons, avatars | AppSizes.touchTarget (48px) |
| AppRadii | Border radius | AppRadii.borderMd (12px) |
Spacing Scale
| Token | Value | Use for |
|-------|-------|---------|
| xxs | 2px | Hairline gaps |
| xs | 4px | Icon-to-text gaps |
| sm | 8px | Related element gaps |
| md | 12px | Form field gaps |
| lg | 16px | Section gaps |
| xl | 20px | Related sections |
| xxl | 24px | Page padding, major gaps |
| xxxl | 32px | Large section separators |
| huge | 48px | Hero spacing |
Size Scale
| Token | Value | Use for |
|-------|-------|---------|
| iconSm | 16px | Inline icons |
| iconMd | 18px | Button icons |
| iconLg | 24px | Navigation icons |
| touchTarget | 48px | Minimum tap area |
| buttonHeight | 48px | Standard buttons |
| avatarMd | 40px | List avatars |
Radii Scale
| Token | Value | Use for |
|-------|-------|---------|
| xs | 4px | Subtle rounding |
| sm | 8px | Buttons, inputs |
| md | 12px | Cards |
| lg | 16px | Modals |
| xl | 24px | Bottom sheets |
| full | 9999px | Pills |
Pre-built BorderRadius objects: AppRadii.borderSm, AppRadii.borderMd, etc.
Usage Examples
See assets/usage_examples.dart for complete examples.
Decision Tree
Need spacing (padding/margin/gap)? → AppSpacing.*
Need component size (width/height)? → AppSizes.*
Need border radius? → AppRadii.*
Value not in tokens? → Add to appropriate token class
Commands
# Import tokens in any widget file
import 'package:bastet/app/theme/tokens.dart';
Resources
- Token files:
mobile/lib/app/theme/app_spacing.dart,app_sizes.dart,app_radii.dart - Barrel import:
mobile/lib/app/theme/tokens.dart
Related Skills
333-333-333/ux-review
testing
VerifiedTrustedCommunity
Review Flutter components and screens for UX/UI compliance. Trigger: When user invokes /ux-review command or requests UX audit.
SKILL.mdUpdated Mar 25, 2026
333-333-333/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 Mar 25, 2026
333-333-333/testing-strategy
testing
VerifiedTrustedCommunity
Testing philosophy and strategy for every feature: test pyramid, mandatory levels per change type, completion checklist, and skill delegation. Trigger: When planning tests for a feature, reviewing test coverage, defining acceptance criteria, or asking what tests a change needs.
SKILL.mdUpdated Mar 25, 2026
333-333-333/terraform-security
development
VerifiedTrustedCommunity
Terraform security practices: sensitive variables, secret management, state protection, .gitignore patterns, and CI/CD credential handling. Trigger: When handling secrets in Terraform, configuring state backends, reviewing .gitignore for Terraform, or setting up CI/CD pipelines for infrastructure.
SKILL.mdUpdated Mar 25, 2026