igorwarzocha/component-engineering
agents/vite-react-ts-convex-tailwind/.opencode/skill/component-engineering/SKILL.md
Apply the formal standard for React component engineering focusing on accessibility, composition, and styling. Use for building professional, composable React artifacts. Use proactively when creating or reviewing React components. Examples: - user: "/component-create Button trigger" → build accessible button with asChild and keyboard map - user: "/component-review src/components/Input.tsx" → audit for accessibility and composition compliance - user: "Build a responsive slider" → select taxonomy type and implement with data attributes - user: "Review my layout component" → check for monolithic patterns vs composition
$ install --global
skillsauthnpx skillsauth add igorwarzocha/opencode-workflows component-engineeringInstall 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 5, 2026, 8:06 PM6.5s7 files scanned
SKILL.md
- name:
- component-engineering
- description:
- |-
- - user:
- Review my layout component" → check for monolithic patterns vs composition
<overview>
This skill embodies the formal standard for building professional, accessible, and composable React artifacts.
</overview>
<context name="Knowledge Deep-Dives">
You MUST read these reference files to perform your duties:
- **Architecture**: `composition.md` - asChild, Taxonomy, Composition.
- **Accessibility**: `accessibility.md` - Keyboard maps, ARIA, Focus management.
- **Styling**: `styling.md` - `cn` utility, Data attributes, CVA, Design tokens.
</context>
<workflow>
<phase name="review">
### /component-review [file]
Strictly audit the file against the specification pillars.
1. You MUST read all reference files in the `references/` directory before proceeding.
2. You SHOULD classify the artifact using `taxonomy.md`.
3. Evaluate **Accessibility**: You MUST check keyboard support and semantic HTML against `accessibility.md`.
4. Evaluate **Architecture**: You MUST check for monolithic patterns vs composition against `composition.md`.
5. Evaluate **Styling**: You SHOULD look for `data-slot` usage and prop spreading against `styling.md`.
</phase>
<phase name="create">
### /component-create [name] [intent]
Build a new artifact following the "Architecture First" workflow.
1. You MUST read the relevant `references/*.md` files to select the correct patterns.
2. You SHOULD choose the **Taxonomy** type.
3. You SHOULD select the base **Semantic Element** or **Headless Primitive**.
4. You MUST implement the **Keyboard Map**.
5. You MUST apply **asChild** support if the component is an activator/trigger.
6. You MUST expose **Data Attributes** (`data-state`, `data-slot`).
7. You SHOULD use the `cn` utility for class merging.
</phase>
</workflow>
Related Skills
igorwarzocha/writing
development
VerifiedTrustedCommunity
Handle structured co-authoring of professional documentation. Use for proposals, technical specs, and RFCs. Use proactively when a collaborative drafting process (Gathering -> Refinement -> Testing) is needed. Examples: - user: "Draft a technical RFC for the new API" -> follow Stage 1 context gathering - user: "Refine the introduction of this proposal" -> use iterative surgical edits - user: "Test if this document is clear for readers" -> run reader testing workflow
100SKILL.mdUpdated Apr 5, 2026
igorwarzocha/word
development
VerifiedTrustedCommunity
Handle Word document (.docx) creation, editing, and analysis with high-fidelity visual review. Use for professional reports, legal documents, and tracked changes. Use proactively when quality and precise formatting are critical. Examples: - user: "Create a professional report in Word" -> use python-docx with render loops - user: "Draft a legal contract with redlines" -> use ooxml redlining workflow - user: "Extract text from this DOCX while preserving structure" -> use pandoc markdown conversion
100SKILL.mdUpdated Apr 5, 2026
igorwarzocha/themes
testing
VerifiedTrustedCommunity
Apply professional visual themes to documents and presentations. Use for styling artifacts with consistent color palettes and font pairings. Use proactively to quickly improve the aesthetic quality of deliverables. Examples: - user: "Apply a modern theme to this deck" -> use Modern Minimalist theme - user: "I want a tech aesthetic for this doc" -> apply Tech Innovation theme - user: "Create a custom theme for my project" -> generate new color/font specification
100SKILL.mdUpdated Apr 5, 2026
igorwarzocha/skill-creator
tools
VerifiedTrustedCommunity
Guide for creating effective opencode skills. Use for creating or updating skills that extend agent capabilities with specialized knowledge, workflows, or tool integrations. Examples: - user: "Create a skill for git workflows" → define SKILL.md with instructions and examples - user: "Add examples to my skill" → follow the user: "query" → action pattern - user: "Update skill description" → use literal block scalar and trigger contexts - user: "Structure a complex skill" → organize with scripts/ and references/ directories - user: "Validate my skill" → check structure, frontmatter, and discovery triggers
100SKILL.mdUpdated Apr 5, 2026