DevanB/Frontend CSS
.claude/skills/frontend-css/SKILL.md
Write consistent, maintainable CSS following the project's methodology (Tailwind utility classes) while minimizing custom CSS and adhering to design system tokens. Use this skill when writing or editing CSS files, Tailwind classes in React components (.tsx, .jsx files), when implementing design system colors/spacing/typography, when using Tailwind utility classes, when deciding between framework utilities vs. custom CSS, when optimizing CSS for production with tree-shaking, when configuring Tailwind theme extensions, or when maintaining design consistency across the application.
tools
Updated Apr 16, 2026
$ install --global
skillsauthnpx skillsauth add DevanB/lucidlog Frontend CSSInstall 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 16, 2026, 12:58 PM4.2s1 file scanned
SKILL.md
- name:
- Frontend CSS
- description:
- Write consistent, maintainable CSS following the project's methodology (Tailwind utility classes) while minimizing custom CSS and adhering to design system tokens. Use this skill when writing or editing CSS files, Tailwind classes in React components (.tsx, .jsx files), when implementing design system colors/spacing/typography, when using Tailwind utility classes, when deciding between framework utilities vs. custom CSS, when optimizing CSS for production with tree-shaking, when configuring Tailwind theme extensions, or when maintaining design consistency across the application.
Frontend CSS
This Skill provides Claude Code with specific guidance on how to adhere to coding standards as they relate to how it should handle frontend CSS.
When to use this skill
- When writing or editing CSS files in the project
- When applying Tailwind CSS utility classes in React components (.tsx, .jsx files)
- When implementing design system tokens (colors, spacing, typography)
- When configuring Tailwind theme extensions using the
@themedirective - When deciding between using framework utilities vs. writing custom CSS
- When maintaining consistent styling patterns across components
- When optimizing CSS for production with purging/tree-shaking
- When avoiding unnecessary framework style overrides
- When working with the project's CSS methodology (Tailwind, BEM, utility-first, etc.)
- When implementing responsive styles using Tailwind breakpoints
- When ensuring CSS performance and bundle size optimization
Instructions
For details, refer to the information provided in this file: frontend CSS
Related Skills
DevanB/Testing Test Writing
development
VerifiedTrustedCommunity
Write focused tests for core user flows and critical paths using Pest framework, with minimal tests during development and strategic coverage at completion points. Use this skill when creating or editing test files in tests/Feature/ or tests/Unit/ directories, when writing Pest tests with descriptive names, when testing critical user workflows and business logic, when mocking external dependencies, when implementing fast unit tests, when testing behavior rather than implementation details, or when deciding what needs test coverage at feature completion.
SKILL.mdUpdated Apr 16, 2026
DevanB/Global Validation
tools
VerifiedTrustedCommunity
Implement server-side validation with allowlists, specific error messages, type checking, and sanitization to prevent security vulnerabilities and ensure data integrity. Use this skill when creating or editing form request classes, when validating API inputs, when implementing validation rules in controllers or services, when writing client-side validation for user experience, when sanitizing user input to prevent injection attacks, when validating business rules, when implementing error message display, or when ensuring consistent validation across all application entry points.
SKILL.mdUpdated Apr 16, 2026
DevanB/Global Tech Stack
tools
VerifiedTrustedCommunity
Understand and adhere to the project's technology stack including Laravel, PHP, React, PostgreSQL, Pest, Tailwind CSS, and all configured tools and services. Use this skill when making architectural decisions, when choosing libraries or packages, when configuring development tools, when setting up testing frameworks, when implementing authentication, when integrating third-party services, when configuring CI/CD pipelines, when setting up local development environments, or when ensuring consistency with the established tech stack across all parts of the application.
SKILL.mdUpdated Apr 16, 2026
DevanB/Global Error Handling
development
VerifiedTrustedCommunity
Implement user-friendly error handling with specific exception types, centralized error handling, graceful degradation, and proper resource cleanup. Use this skill when implementing error handling in controllers, services, or API endpoints, when creating custom exception classes, when writing try-catch blocks, when handling external service failures, when implementing retry strategies, when displaying error messages to users, when cleaning up resources in finally blocks, or when implementing fail-fast validation and error detection.
SKILL.mdUpdated Apr 16, 2026