tadams95/component
.claude/skills/component/SKILL.md
Create a new React component following Kardashev Network project patterns
development
Updated Apr 15, 2026
$ install --global
skillsauthnpx skillsauth add tadams95/kardashev-network 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 15, 2026, 4:12 AM4.6s1 file scanned
SKILL.md
- name:
- component
- description:
- Create a new React component following Kardashev Network project patterns
- disable-model-invocation:
- true
- argument-hint:
- <ComponentName>
Create React Component
Create a new React component named: $ARGUMENTS
Project Patterns
Follow the existing component patterns in src/components/:
File Structure
src/components/
├── ComponentName.tsx # Component file (PascalCase)
Component Template
import React from "react";
interface ${COMPONENT_NAME}Props {
// Define props here
}
export default function ${COMPONENT_NAME}({ ...props }: ${COMPONENT_NAME}Props) {
return (
<div className="">
{/* Component content */}
</div>
);
}
Style Guidelines
- Tailwind CSS - Use Tailwind utility classes, no inline styles
- Responsive - Mobile-first approach (
sm:,md:,lg:breakpoints) - Dark theme - Use
bg-black,text-gray-200,text-whitefor dark backgrounds - Consistent spacing - Use
p-4,p-6,p-8for padding;space-x-*,gap-*for spacing
Color Palette (from existing components)
- Background:
bg-black,bg-white,bg-white/5 - Text:
text-gray-200,text-gray-300,text-gray-500,text-white - Accent:
bg-indigo-600,hover:bg-indigo-500 - Borders:
border-gray-700
Checklist
- [ ] Create component file in
src/components/ - [ ] Use TypeScript with proper interface for props
- [ ] Follow existing naming conventions (PascalCase)
- [ ] Add Tailwind classes for styling
- [ ] Export as default
- [ ] Component is responsive
Related Skills
tadams95/wagmi-viem
development
VerifiedTrustedCommunity
Web3 integration with wagmi and viem - wallet connection, contract interactions, transactions, RainbowKit. Use when implementing wallet features, reading/writing contracts, or handling blockchain transactions.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-textures
content-media
VerifiedTrustedCommunity
Three.js textures - loading, configuration, UV mapping, environment maps. Use when loading images, configuring texture properties, or working with HDR environments.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-shaders
data-ai
VerifiedTrustedCommunity
Three.js shaders - GLSL, ShaderMaterial, uniforms, custom effects. Use when creating custom visual effects, modifying vertices, writing fragment shaders, or extending built-in materials.
SKILL.mdUpdated Apr 15, 2026
tadams95/threejs-postprocessing
testing
VerifiedTrustedCommunity
Three.js post-processing - EffectComposer, bloom, depth of field, custom passes. Use when adding visual effects, screen-space effects, or enhancing rendered output.
SKILL.mdUpdated Apr 15, 2026