skill-report.json
{
"schema_version": "2.0",
"meta": {
"generated_at": "2026-06-29T17:29:32.031Z",
"slug": "devanb-frontend-css",
"source_url": "https://github.com/DevanB/lucidlog/tree/master/.claude/skills/frontend-css",
"source_ref": "master",
"model": "codex",
"analysis_version": "3.0.0",
"source_type": "community",
"content_hash": "e547b2c1c1f83958a826add3c6026ce6177b04e2a039680761ea898977e45114",
"tree_hash": "b6b68b4374ec95dbb3a98c0943e9f36e2e57567c0cd89c1a29cde292f71937ca"
},
"skill": {
"name": "frontend-css",
"description": "Guides frontend CSS work toward Tailwind utility classes, design system tokens, responsive patterns, and minimal custom CSS.",
"summary": "Apply consistent Tailwind CSS and design system styling across frontend components.",
"icon": "📦",
"version": "1.0.0",
"author": "DevanB",
"license": "MIT",
"category": "coding",
"tags": [
"css",
"tailwind",
"frontend",
"design-system",
"react"
],
"supported_tools": [
"claude",
"codex",
"claude-code"
],
"risk_factors": [
"filesystem"
]
},
"security_audit": {
"risk_level": "low",
"is_blocked": false,
"safe_to_publish": true,
"summary": "Static analysis reported command execution, path traversal, and weak cryptography patterns. Review found no executable command, cryptographic code, network access, secret handling, or prompt injection in SKILL.md. The only retained concern is a Markdown link that references a file outside the skill directory, which is a low-risk packaging and reviewability issue.",
"risk_factor_evidence": [
{
"factor": "filesystem",
"evidence": [
{
"file": "SKILL.md",
"line_start": 27,
"line_end": 27
}
]
}
],
"critical_findings": [],
"high_findings": [],
"medium_findings": [],
"low_findings": [
{
"title": "False Positive: Markdown Inline Code Flagged as Command Execution",
"description": "Verdict: FALSE_POSITIVE. Line 15 uses backticks around the Tailwind @theme directive as Markdown inline code. There is no shell invocation, script, or user-controlled command string.",
"locations": [
{
"file": "SKILL.md",
"line_start": 15,
"line_end": 15
}
],
"confidence": 0.96,
"confidence_reasoning": "The line contains documentation text only. No executable language context or command runner is present in the reviewed file."
},
{
"title": "False Positive: Weak Cryptography Keywords in CSS Guidance",
"description": "Verdict: FALSE_POSITIVE. Static weak-cryptography hits on lines 3, 8, 14, and 19 are keyword collisions in prose about CSS standards, classes, typography, and style overrides. No hashing, encryption, or cryptographic API appears in the file.",
"locations": [
{
"file": "SKILL.md",
"line_start": 3,
"line_end": 3
},
{
"file": "SKILL.md",
"line_start": 8,
"line_end": 8
},
{
"file": "SKILL.md",
"line_start": 14,
"line_end": 14
},
{
"file": "SKILL.md",
"line_start": 19,
"line_end": 19
}
],
"confidence": 0.94,
"confidence_reasoning": "The surrounding context is frontend styling guidance. I found no code or instructions that implement weak cryptography."
},
{
"title": "Relative Documentation Link Exits Skill Directory",
"description": "Verdict: LOW_RISK_TRUE_POSITIVE. Line 27 links to ../../../agent-os/standards/frontend/css.md. This is a Markdown documentation reference, not path traversal in code, but it depends on a file outside the packaged skill and may reduce reviewability.",
"locations": [
{
"file": "SKILL.md",
"line_start": 27,
"line_end": 27
}
],
"confidence": 0.78,
"confidence_reasoning": "The path traversal sequence is real, but it appears only in a Markdown link. The risk is limited to external file dependency, not direct file read or exfiltration."
}
],
"dangerous_patterns": [],
"files_scanned": 1,
"total_lines": 28,
"audit_model": "codex",
"audited_at": "2026-06-29T17:29:32.031Z",
"risk_factors": [
"filesystem"
]
},
"content": {
"user_title": "Build Consistent Tailwind CSS",
"value_statement": "Frontend teams often drift from design tokens and repeat custom CSS. This skill gives Claude, Codex, and Claude Code focused guidance for Tailwind utility classes, responsive styling, and maintainable component CSS.",
"seo_keywords": [
"Claude",
"Codex",
"Claude Code",
"Tailwind CSS",
"frontend CSS",
"design system",
"React styling",
"utility classes",
"responsive design",
"CSS optimization"
],
"actual_capabilities": [
"Guides CSS changes toward Tailwind utility classes instead of unnecessary custom CSS.",
"Promotes consistent use of design system colors, spacing, and typography.",
"Supports styling work in CSS files and React component files.",
"Encourages responsive implementation with Tailwind breakpoints.",
"Provides direction for Tailwind theme extension decisions.",
"Highlights CSS performance concerns such as purging and tree-shaking."
],
"limitations": [
"It does not include the referenced external standards file in the packaged skill.",
"It does not generate visual assets or complete UI designs by itself.",
"It does not validate rendered layouts in a browser.",
"It depends on the host project already using Tailwind or similar conventions."
],
"use_cases": [
{
"title": "Standardize Component Styling",
"description": "Apply project styling conventions while editing React components and shared UI elements.",
"target_user": "Frontend developers"
},
{
"title": "Reduce Custom CSS Drift",
"description": "Review CSS changes and prefer existing utilities or tokens when they meet the requirement.",
"target_user": "Code reviewers"
},
{
"title": "Extend Tailwind Carefully",
"description": "Plan theme token additions only when existing design system values do not fit.",
"target_user": "Design system maintainers"
}
],
"prompt_templates": [
{
"title": "Apply Tailwind Classes",
"scenario": "Beginner component styling",
"prompt": "Use the frontend-css skill to style this component with Tailwind utilities and existing design tokens."
},
{
"title": "Refactor Custom CSS",
"scenario": "Replace avoidable custom styles",
"prompt": "Use the frontend-css skill to review this CSS and replace custom rules with Tailwind utilities where appropriate."
},
{
"title": "Improve Responsive Layout",
"scenario": "Responsive interface work",
"prompt": "Use the frontend-css skill to adjust this layout for mobile, tablet, and desktop using Tailwind breakpoints."
},
{
"title": "Assess Theme Extension",
"scenario": "Advanced design system change",
"prompt": "Use the frontend-css skill to decide whether this new visual value belongs in the Tailwind theme or local component styles."
}
],
"output_examples": [
{
"input": "A React card uses repeated custom spacing and color rules.",
"output": "The assistant recommends existing spacing utilities, token-based colors, and a smaller custom CSS surface."
},
{
"input": "A layout works on desktop but fails on mobile.",
"output": "The assistant proposes breakpoint-specific utility changes and checks that spacing remains consistent."
},
{
"input": "A team wants to add a new Tailwind theme value.",
"output": "The assistant explains when a theme token is justified and when a local utility combination is enough."
}
],
"best_practices": [
"Start with existing Tailwind utilities and design tokens before adding custom CSS.",
"Keep responsive behavior explicit with project-approved breakpoint patterns.",
"Document theme extensions when they represent reusable design system decisions."
],
"anti_patterns": [
"Do not add one-off CSS rules when existing utilities solve the same problem.",
"Do not bypass design tokens with arbitrary colors, spacing, or typography.",
"Do not create theme values for isolated component needs."
],
"faq": [
{
"question": "Does this skill require Tailwind CSS?",
"answer": "It is written for Tailwind-centered projects, but some guidance also applies to utility-first CSS workflows."
},
{
"question": "Can it edit React components?",
"answer": "Yes. The skill is intended for Tailwind classes in React component files such as .tsx and .jsx."
},
{
"question": "Does it replace a design system?",
"answer": "No. It helps apply existing design system tokens and conventions during implementation."
},
{
"question": "Does it run commands or scripts?",
"answer": "No evidence found. The reviewed file contains documentation guidance only."
},
{
"question": "Why is the security risk low?",
"answer": "The skill links to a relative file outside its directory, but no malicious behavior or executable code was found."
},
{
"question": "What should publishers improve?",
"answer": "They should include the referenced CSS standards file or move the guidance directly into the skill."
}
]
},
"file_structure": [
{
"name": "SKILL.md",
"type": "file",
"path": "SKILL.md",
"lines": 28
}
]
}