A collection of skills for AI coding agents. Skills are packaged instructions that extend agent capabilities. Skills follow the Agent Skills format.

All skills here reflect the way Mike Mai codes.

Note: npx skills is a convenient way to install but if you want to install specifically for Claude Code, drop the files into the .claude/skills folder.

Install all skills at once so you code exactly like Mike:

npx skills add mikemai2awesome/agent-skills

These three compliment each other and work best together:

npx skills add mikemai2awesome/agent-skills --skill more-css
npx skills add mikemai2awesome/agent-skills --skill frontend-conventions
npx skills add mikemai2awesome/agent-skills --skill frontend-a11y

These two make up a super minimal setup:

npx skills add mikemai2awesome/agent-skills --skill tiny-css
npx skills add mikemai2awesome/agent-skills --skill frontend-a11y

frontend-design-2010s works in tandem with the real projects trio — install all four together:

npx skills add mikemai2awesome/agent-skills --skill more-css
npx skills add mikemai2awesome/agent-skills --skill frontend-conventions
npx skills add mikemai2awesome/agent-skills --skill frontend-a11y
npx skills add mikemai2awesome/agent-skills --skill frontend-design-2010s

format-storybook is standalone and can be added if your project involves Storybook:

npx skills add mikemai2awesome/agent-skills --skill format-storybook

brightcove-player is standalone for projects that use the Brightcove video player:

npx skills add mikemai2awesome/agent-skills --skill brightcove-player

ios-a11y is standalone for iOS projects using Swift, UIKit, or SwiftUI:

npx skills add mikemai2awesome/agent-skills --skill ios-a11y

Skills are automatically available once installed. The agent will use them when relevant tasks are detected. They are also triggered manually through / command.

• tiny-css: Write minimal, efficient CSS for small or minimalist projects by trusting the browser instead of fighting it.
• more-css: The default CSS skill for real projects. Write scalable vanilla CSS using design tokens (@layer config), cascade layers, BEM naming, light-dark() for theming, OKLCH colors, and relative units (rem, cqi, clamp()). No frameworks, no Sass.
• frontend-design-2010s: Recreate the authentic early-2010s corporate/SaaS web aesthetic — gradient headers, glossy CTA buttons, skeuomorphic icons, horizontal band layouts, and drop shadows. Produces fluid, complete pages that feel genuinely built in 2011, not like a modern design mimicking it.
• frontend-conventions: Establish and enforce consistent coding standards across HTML, CSS, and JavaScript — formatting, naming cases, class prefixes, acceptable abbreviations, modifier APIs (sizes, shades, hierarchy, breakpoints), and CSS property order.
• frontend-a11y: Write minimal, accessible HTML, CSS, and JavaScript without over-engineering. Uses native browser elements instead of ARIA-hacking generic divs, component libraries, or focus-trap packages.
• ios-a11y: Implement accessibility in iOS apps using Swift, UIKit, and SwiftUI — VoiceOver labels/hints/traits/actions, Dynamic Type, Reduce Motion, Dark Mode, focus management, custom rotors, Voice Control, Switch Control, and XCTest audits. Based on Appt Docs and CVS SwiftUI Accessibility.
• brightcove-player: Style and fully customize the Brightcove video player UI — control bar, play button, progress bar, volume, captions, playlists, responsive sizing, and skins. Works with .vjs-* CSS classes, in-page and iframe embeds, and the bc() / videojs JavaScript APIs.
• format-storybook: Structure and organize Storybook files for scalability using battle-tested patterns from Cassondra Roberts. Covers story files, template files, controls, visual regression testing, and component documentation. Based on "A Storybook format that scales with you" by Cassondra Roberts.

Accessibility Commitment

MIT