aanjaneyasinghdhoni/component
.claude/skills/component/SKILL.md
Creates a new Astro component following this project's conventions. Use when the user asks to create a new section, component, or UI element.
tools
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add aanjaneyasinghdhoni/portfolio componentInstall 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, 1:38 AM5.8s1 file scanned
SKILL.md
- name:
- component
- description:
- Creates a new Astro component following this project's conventions. Use when the user asks to create a new section, component, or UI element.
Create a new .astro component in src/components/. Follow every rule below — no exceptions.
File Structure
---
// TypeScript props interface (always explicit, never `any`)
interface Props {
propName: string;
}
const { propName } = Astro.props;
---
<!-- HTML -->
<style>
/* Scoped CSS */
</style>
Required Conventions
CSS
- Use ONLY CSS variables — never hardcode colours, font names, or sizes
- All new containers use
.containerclass for max-width and padding - Section padding:
padding: 6rem 0 - New sections need
idattribute matching the nav anchor (e.g.id="skills")
Animations
- Wrap animatable elements with
data-reveal(fade in on scroll) - For staggered lists use
data-reveal-staggeron the parent - Always guard with
prefers-reduced-motioncheck (already handled byreveal.css)
Typography
- Section label:
<p class="section-label">// label text</p> - Section title:
<h2 class="section-title">TITLE</h2> - Mono text: add class
mono— never inlinefont-family
Accessibility
- Every
<img>needsalt - Every icon-only button needs
aria-label - Use semantic elements:
<article>,<section>,<time>,<address>
Design Patterns
- Cards:
background: var(--bg-elevated),border: 1px solid var(--border) - Chamfered corner:
clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%) - Hover lift:
transform: translateY(-2px),border-color: var(--gold-dim) - Gold accent text:
color: var(--gold)withfont-family: var(--font-mono)
After Creating
Remind the user to import and add the component to src/pages/index.astro.
Related Skills
aanjaneyasinghdhoni/seo-check
testing
VerifiedTrustedCommunity
Audits SEO quality of a page or component. Use when the user asks to check SEO, meta tags, or discoverability.
SKILL.mdUpdated Apr 16, 2026
aanjaneyasinghdhoni/review
development
VerifiedTrustedCommunity
Industry-standard code review. Use when the user asks to review code, check a file, or audit changes.
SKILL.mdUpdated Apr 16, 2026
aanjaneyasinghdhoni/performance-check
development
VerifiedTrustedCommunity
Audits frontend performance of a page or component. Use when the user asks to check performance, speed, or Core Web Vitals.
SKILL.mdUpdated Apr 16, 2026
aanjaneyasinghdhoni/idea-thinker
development
VerifiedTrustedCommunity
Generates innovative ideas to improve the portfolio website — new sections, features, interactions, and content angles. Use when the user wants creative direction for the site, wants to stand out, or asks what could be better/added.
SKILL.mdUpdated Apr 16, 2026