https://github.com/stevensacks/skills
My personal directory of skills, straight from my .claude directory.
https://github.com/stevensacks/skills
Last synced: about 2 months ago
JSON representation
My personal directory of skills, straight from my .claude directory.
- Host: GitHub
- URL: https://github.com/stevensacks/skills
- Owner: stevensacks
- License: mit
- Created: 2026-04-03T11:00:20.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2026-04-04T10:23:28.000Z (4 months ago)
- Last Synced: 2026-04-04T12:20:16.203Z (4 months ago)
- Size: 13.7 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Agent Skills
A collection of agent skills that extend Claude Code with conventions and guardrails. Skills are prompt instructions loaded into your agent to enforce patterns and prevent common mistakes.
- Install all skills: `npx skills@latest add stevensacks/skills`
- Install individual skills: `npx skills@latest add stevensacks/skills@skill-name`
## Development Skills
These skills help your agent write, refactor, and audit code. They're designed to be guardrails without overloading the prompt.
- **react-code** - React component and hooks conventions. Includes pre-flight decision trees for `useEffect`, `useCallback`, `useMemo`, and `useState` to prevent the most common sources of React bugs.
- **skeleton-loaders** - Pixel-perfect skeleton loaders built from real HTML elements with matching font classes, shimmer animation, and transparent text — no hardcoded heights. Includes a 200ms delay pattern to prevent skeleton flash on fast loads. Uses [Tailwind](https://tailwindcss.com/).
- **tailwind** - Patterns for writing clean [TailwindCSS](https://tailwindcss.com/). Covers `twJoin` vs `twMerge` for conditionals and class overrides, rem-only custom values, and when to promote arbitrary values to `@theme`. Leverages [tailwind-merge](https://github.com/dcastil/tailwind-merge).
- **typescript** - Opinionated TypeScript patterns that reduce bugs and technical debt. Enforces `type` over `interface`, no enums (use `as const`), Swift-style descriptive naming, explicit return types on exported functions, and a max of 3 function parameters.
## Tailwind Linting
For linting Tailwind class names, the skill prompt can remain compact if you're using linting rules that prevent commits when there are lint warnings.
For ESLint and Prettier, I recommend the following config:
- [prettier-plugin-tailwindcss](https://github.com/tailwindlabs/prettier-plugin-tailwindcss)
```json
{
// ... your prettier config
"plugins": ["prettier-plugin-tailwindcss"],
"tailwindFunctions": ["twJoin", "twMerge"]
}
```
- [eslint-plugin-better-tailwindcss](https://github.com/schoero/eslint-plugin-better-tailwindcss)
```js
import betterTailwind from 'eslint-plugin-better-tailwindcss';
const betterTailwindConfig = [
{
name: 'better-tailwindcss',
plugins: {
'better-tailwindcss': betterTailwind,
},
rules: {
'better-tailwindcss/enforce-canonical-classes': 'error',
'better-tailwindcss/enforce-consistent-important-position': 'error',
'better-tailwindcss/enforce-consistent-variable-syntax': 'error',
'better-tailwindcss/enforce-shorthand-classes': 'error',
'better-tailwindcss/no-conflicting-classes': 'error',
'better-tailwindcss/no-deprecated-classes': 'error',
},
settings: {
'better-tailwindcss': {
detectComponentClasses: true,
entryPoint: './app/styles/tailwind.css', // Path to your Tailwind entry file
},
},
},
];
```