kenoxa/with-frontend
skills/with-frontend/SKILL.md
Frontend standards. Use when: 'components', 'pages', 'styles', 'UI code'.
$ install --global
skillsauthnpx skillsauth add kenoxa/spine with-frontendInstall 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: May 22, 2026, 6:57 AM120.8s2 files scanned
SKILL.md
- name:
- with-frontend
- description:
- >-
- Frontend standards. Use when:
- components', 'pages', 'styles', 'UI code'.
- argument-hint:
- [component or UI task]
UI implementation with explicit state coverage and accessibility as first-class gate.
Propose Before Building
Ambiguous frontend scope → propose ASCII sketch or block diagram showing layout, interactions, and UI states before implementation. Ask one clarifying question if critical UX intent unclear.
For visual craft (typography, color, motion, composition), use frontend-design skill.
For modern web-platform best-practice patterns and Baseline browser-support guidance, use modern-web-guidance skill before implementing.
State Coverage
Every UI component MUST account for these states where applicable:
- Loading — skeleton or spinner, not blank screen
- Error — actionable message, not raw error
- Empty — guidance or call-to-action, not blank
- Responsive — functional across viewport sizes
Accessibility
Accessibility gates completion — never defer to follow-up pass.
- Focus management on route changes and modal open/close — visible focus indicators required.
For comprehensive audits, use wcag-audit-patterns skill.
Framework-Specific
For Svelte (.svelte, .svelte.ts, SvelteKit) work, see references/svelte.md — MCP workflow, delegation to @svelte-file-editor, runes-only, autofixer-before-commit, form actions preferred.
Anti-Patterns
- Implementing without proposing layout when scope ambiguous
- Missing loading, error, or empty states
- Treating accessibility as follow-up task
Related Skills
kenoxa/run-clawpatch
testing
VerifiedTrustedCommunity
Use when: 'clawpatch', 'clawpatch campaign', 'clawpatch review fix revalidate'.
2SKILL.mdUpdated Jun 11, 2026
kenoxa/use-worktree
tools
VerifiedTrustedCommunity
Use when: 'create a worktree', 'git worktree', 'parallel branch'.
2SKILL.mdUpdated May 22, 2026
kenoxa/use-session
tools
VerifiedTrustedCommunity
Use when: 'session state', 'resume work', 'worktree session'.
2SKILL.mdUpdated May 22, 2026
kenoxa/use-goal-prompt
development
VerifiedTrustedCommunity
Use when: 'goal prompt', 'frame this', 'scope this', 'design', 'plan the approach', 'implement and review', 'just ship it', 'fix this', 'add this'.
2SKILL.mdUpdated May 22, 2026