randyhaylor/solid-vue-development
ai-tools/solid-vue-development/SKILL.md
Core principles for writing clean, disciplined Vue 3 apps. Invoke when reviewing architecture, adding features, or evaluating component design.
development
Updated Apr 20, 2026
$ install --global
skillsauthnpx skillsauth add randyhaylor/enhanceclaude solid-vue-developmentInstall 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 20, 2026, 5:16 AM8.9s3 files scanned
SKILL.md
- name:
- solid-vue-development
- description:
- Core principles for writing clean, disciplined Vue 3 apps. Invoke when reviewing architecture, adding features, or evaluating component design.
State vs. Behavior
- State = what something is → reactive refs on the owner of that concern
- Behavior = what something does → named functions (
signIn(),getTemplate()) - Never model a process as state. If you're naming refs after verbs (
isLoading,hasFetched,shouldRefresh), the process has escaped into the wrong layer.
Component Boundaries
- Components call functions. They don't own logic that belongs to a manager or service.
- Auth, sync, Drive, encryption — these have dedicated owners. Components receive state and call methods; they don't implement.
Manager Pattern
- Encapsulate a domain's state AND behavior in a single manager (e.g.
GoogleDriveConnectionManager). - The manager exposes reactive state for the UI to read and named functions for the UI to call.
- No Drive logic in components. No auth logic in composables that belong in a manager.
Reactive Chains: Use Them Right
computed= derived values from state. Not side effects, not process orchestration.watch= react to state changes for necessary side effects only.- Don't build process logic out of watcher chains. Write a function.
Naming
- Functions: verb phrases describing what they do in isolation —
encryptUserData(),fetchTopicTemplate() - State/types: nouns —
encryptionSalt,StorageProvider,UserEntry - CSS variables:
--target-trigger-property-attribute - Long and explicit beats short and ambiguous. Always.
Scope Discipline
- Don't add what wasn't asked for.
- Don't abstract for hypothetical reuse.
- Three similar lines of code is better than a premature abstraction.
- A bug fix is not an invitation to refactor surrounding code.
Related Skills
randyhaylor/ai-tools/xstate
tools
VerifiedTrustedCommunity
# XState v5 Quick Reference ## How to Look Up API Details For complete function signatures, types, and interfaces, **grep `api-reference.md`** — do NOT read it in full (12k+ lines). Example: ``` Grep pattern="createActor" path="~/.claude/skills/xstate/api-reference.md" output_mode="content" -C 5 ``` Then use `Read` with `offset`/`limit` to get the full section. This is the primary way to get precise technical info when the quick reference below isn't enough. ## Design Workflow Recommended
SKILL.mdUpdated Apr 20, 2026
randyhaylor/vscode-agent-teams
tools
VerifiedTrustedCommunity
Workaround for agent teams in VS Code extension where TeamCreate teammates cannot execute tools. Uses an echo-back-and-resume pattern where agents return tool requests instead of executing them directly.
SKILL.mdUpdated Apr 20, 2026
randyhaylor/typographic-hierarchy
development
VerifiedTrustedCommunity
Format documentation, READMEs, and structured text using header hierarchy where each level stands alone. Use when creating docs, research notes, summaries, or when user requests 'scannable,' 'well-structured,' 'skimmable,' or 'readable at multiple depths' output. Applies to markdown, technical specs, and any hierarchical text formatting.
SKILL.mdUpdated Apr 20, 2026
randyhaylor/test-driven-development
development
VerifiedTrustedCommunity
Enforce strict Test-Driven Development workflow: write one test, make it pass, verify, then proceed. Prevents over-implementation and ensures code matches requirements exactly. Use when implementing new features, adding settings, or building functionality incrementally.
SKILL.mdUpdated Apr 20, 2026