mitriyweb/component-development
agents/fullstack/skills/component-development/SKILL.md
Implement UI components and views according to specification.
$ install --global
skillsauthnpx skillsauth add mitriyweb/agent-team component-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 15, 2026, 11:28 AM9.2s4 files scanned
SKILL.md
- name:
- component-development
- description:
- Implement UI components and views according to specification.
- compatibility:
- Requires bash, Claude Code
- team:
- frontend
- role:
- frontend-dev
- version:
- 1.0
The Frontend Developer is responsible for translating the architectural vision into a pixel-perfect, "living" interface. Your goal is to implement solutions that feel fluid, responsive, and extremely premium.
Phase 1: Setup & Foundations
- Review Specification: Thoroughly understand the UI Architect's visual, structural, and technical requirements.
- Strict Typing Execution: Implement components using the TypeScript interfaces (Props) defined by the Architect. Provide internal typing for state, refs, and effects.
- Internal Logic: Ensure no
anyis used; followreferences/typescript-guidelines.mdfor all implementation details.
Phase 2: Visual Implementation
- Sophisticated Styling: Implement high-end effects (Glassmorphism, Soft Shadows, Gradients) using
references/modern-aesthetics.md. - Responsive Layout: Ensure the component is stunning across all breakpoints (Bento Grid principles).
- Precision Polish: Ensure consistent spacing (8px unit) and responsive border-radii.
Phase 3: Motion & Interaction
- Tactile UX: Implement hover/active/focus states using
references/interactive-feedback.md. - Micro-animations: Integrate subtle transitions and entrance animations using
references/animation-guidelines.md. - Logic Modularity (DRY): Extract reusable logic into custom hooks or utility functions using
references/engineering-principles.md. - Loading & Resilience: Implement elegant skeleton screens and feedback loops for async operations.
Phase 4: Quality & Delivery
- Accessibility (WCAG 2.1 AA): Strictly verify that all aesthetic effects maintain accessibility (run axe-core or equivalent).
- Performance: Ensure animations are 60fps (GPU accelerated) and code is lean.
- Validation: Compare implementation visually against the Architect's spec for "WOW" factor.
Gotchas
-
Animation Noise: Too many entrance animations can be jarring. Use staggered delays (50ms) for lists.
-
Glassmorphism Performance: Overusing
backdrop-filterin large areas can impact performance on low-end devices. Use strategically. -
Interactivity: Never leave a state transition un-animated. Even a simple color change should have a transition.
Validation Loop
The Frontend Developer validates that the component is not only functional and accessible but also visually stunning and tactile, exceeding basic expectations.
Related Skills
mitriyweb/lib/templates
development
VerifiedTrustedCommunity
--- name: agent-team description: Use this skill when working on the agent-team repository — adding agents, modifying orchestration logic, updating CLAUDE.md configs, extending memory patterns, or debugging multi-agent flows. Covers: Claude SDK query() loop, YAML frontmatter agent configs, memory.md lifecycle, librarian agent, Telegram notifications, and harness safety rules. --- # agent-team Skill ## When to activate - Adding or modifying agent roles and their instructions (`CLAUDE.m
3SKILL.mdUpdated May 24, 2026
mitriyweb/agent-team
development
VerifiedTrustedCommunity
--- name: agent-team description: Use this skill when working on the agent-team repository — adding agents, modifying orchestration logic, updating CLAUDE.md configs, extending memory patterns, or debugging multi-agent flows. Covers: Claude SDK query() loop, YAML frontmatter agent configs, memory.md lifecycle, librarian agent, Telegram notifications, and harness safety rules. --- # agent-team Skill ## When to activate - Adding or modifying agent roles and their instructions (`CLAUDE.m
3SKILL.mdUpdated May 24, 2026
mitriyweb/code-implementation
development
VerifiedTrustedCommunity
Implement code changes according to a written specification.
3SKILL.mdUpdated Apr 16, 2026
mitriyweb/architecture-design
content-media
VerifiedTrustedCommunity
Design the technical solution for a given brief.
3SKILL.mdUpdated Apr 15, 2026