timequity/ui-generator
skills/ui-generator/SKILL.md
Generate UI components from natural language descriptions. Use when: user asks for a page, component, or UI element. Triggers: "create page", "add component", "show form", "make button", "страница", "компонент", "форма".
tools
Updated Apr 17, 2026
$ install --global
skillsauthnpx skillsauth add timequity/vibe-coder ui-generatorInstall 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, 8:22 AM8.6s1 file scanned
SKILL.md
- name:
- ui-generator
- description:
- |
- Use when:
- user asks for a page, component, or UI element.
- Triggers:
- create page", "add component", "show form", "make button",
UI Generator
Create beautiful UI from descriptions. Integrates with theme-factory.
Process
-
Understand request
- "Login page" → form with email/password
- "Dashboard" → stats cards, charts, tables
- "Settings" → form sections, toggles
-
Apply theme
- Load current theme from theme-factory
- Use theme colors and fonts
- Follow frontend-design principles
-
Generate code
- React/Next.js components
- Tailwind CSS styling
- Responsive by default
-
Preview
- Hot reload in browser
- User sees result immediately
Component Patterns
| Request | Components | |---------|------------| | "login page" | Form, inputs, button, link | | "dashboard" | Stats cards, chart, table | | "settings" | Sections, toggles, form | | "landing page" | Hero, features, CTA, footer | | "pricing" | Tier cards, comparison table | | "profile" | Avatar, info, edit form |
Design Rules
From frontend-design skill:
- No Inter, Roboto, Arial
- No purple gradients on white
- Distinctive, memorable aesthetics
- Motion and micro-interactions
Usage
User says: "Add a pricing page with 3 tiers"
- Generate PricingPage component
- Create PricingTier subcomponent
- Apply current theme
- Add to routes
- Show preview: "Here's your pricing page"
Related Skills
timequity/verification-gate
development
VerifiedTrustedCommunity
Hidden quality gate that runs before showing "Done!" to user - ensures all tests pass, build succeeds, and requirements met before claiming completion
SKILL.mdUpdated Apr 17, 2026
timequity/verification-before-completion
data-ai
VerifiedTrustedCommunity
Use when about to claim work is complete or fixed - requires running verification commands and confirming output before making any success claims
SKILL.mdUpdated Apr 17, 2026
timequity/theme-factory
content-media
VerifiedTrustedCommunity
10 ready-to-use themes with colors and fonts for consistent styling. Use when: applying visual themes to pages, components, or design systems. Triggers: "theme", "color palette", "color scheme", "fonts", "branding", "visual identity", "design system colors".
SKILL.mdUpdated Apr 17, 2026
timequity/testing-python
development
VerifiedTrustedCommunity
Python testing best practices with pytest. Covers unit, integration, async tests, mocking, fixtures. Triggers: "напиши тесты", "write tests", "add tests", "test coverage", "pytest"
SKILL.mdUpdated Apr 17, 2026