glassflow/apply-design-principles
ui/.cursor/skills/apply-design-principles/SKILL.md
Loads and applies product/UX design principles and design system when designing or implementing features. Use when designing a new feature, implementing a new feature, or when the user asks for design or UX input.
$ install --global
skillsauthnpx skillsauth add glassflow/clickhouse-etl apply-design-principlesInstall 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 17, 2026, 11:17 AM11.7s1 file scanned
SKILL.md
- name:
- apply-design-principles
- description:
- Loads and applies product/UX design principles and design system when designing or implementing features. Use when designing a new feature, implementing a new feature, or when the user asks for design or UX input.
Apply Design Principles
Apply this skill when designing a new feature, implementing a new feature, or when the user requests design or UX input. Use it to align decisions with the designer’s guidance.
When to apply
- Designing a new feature or user journey
- Implementing a new feature (UI, flows, or product behavior)
- User asks for design input, UX decisions, or product direction
What to load
- Always: docs/design/DESIGN_PRINCIPLES.md — product principles, design process, brand and visual direction.
- When the work involves UI, layout, or visuals: Load the styling stack in this order:
- .cursor/architecture/UI_AND_STYLING.md — primitives own states, semantic props only, forms, tokens, what not to use in app code, design workflow (Figma sync, Code Connect).
- docs/architecture/DESIGN_SYSTEM.md — full token system, card variants, semantic and component tokens.
.cursor/styling.mdc— rules (dark-only, no hardcoded colors, Tailwind usage).- When touching theme or token definitions: .cursor/architecture/THEMING_ARCHITECTURE.md.
- When implementing from Figma or syncing tokens: docs/design/DESIGN_WORKFLOW.md and docs/design/FIGMA_TOKEN_REFERENCE.md.
How to use
After loading the doc(s), briefly reflect on the approach against the principles. Either confirm alignment or call out tradeoffs and suggest small adjustments. Do not duplicate the full doc in the skill; reference it.
Reflection checklist (quick validation):
- Does this serve data engineers first and accelerate their work?
- Is clarity favored over fewer clicks or consistency at the cost of confusion?
- Is scope right-sized for today (modular, document what was descoped)?
- Does it match brand/visual direction (dark theme, orange primary, cool gray, modern and sophisticated)?
- If it’s a significant change: is design quality in production considered (edge cases, testing, user validation)?
- Styling: Are primitives used with semantic props only (
variant,error,readOnly)? No raw hex or duplicate control/button/card styling at call sites; tokens from DESIGN_SYSTEM / theme.
Context map
For feature design / UX: .cursor/CONTEXT_MAP.md — design row loads DESIGN_PRINCIPLES.md (+ DESIGN_SYSTEM.md and styling.mdc when UI/styling involved). For UI styling / tokens / cards: load styling.mdc + UI_AND_STYLING.md + DESIGN_SYSTEM.md.
Related Skills
glassflow/maintain-documentation
development
VerifiedTrustedCommunity
Keeps project documentation aligned with implementation. Use when adding a new feature, changing architecture, adding a module or store slice, adding an implementation (e.g. SSE/Kerberos-like), or when the user asks to update docs, align documentation with code, or keep docs in sync.
455SKILL.mdUpdated Apr 17, 2026
glassflow/frontend-design
development
VerifiedTrustedCommunity
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
455SKILL.mdUpdated Apr 17, 2026
glassflow/vercel-react-best-practices
development
VerifiedTrustedCommunity
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
455SKILL.mdUpdated Apr 17, 2026
glassflow/next-upgrade
development
VerifiedTrustedCommunity
Upgrade Next.js to the latest version following official migration guides and codemods
455SKILL.mdUpdated Apr 17, 2026