skills.rest
ookamiinc
ookamiincOFFICIAL
Explore all skills by this author →
WebsiteGitHub

ookami-coding-style-web

Codify frontend coding conventions for React projects using ES2015+, CSS Modules, and Prettier.

1|1|Updated Feb 9, 2016
Search Tags:#frontend#react#prettier#web#coding-style#css-modules
One-click install
npx skills add https://github.com/ookamiinc/guides --skill ookami-coding-style-web
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ookami-coding-style-web
Source: https://github.com/ookamiinc/guides/tree/main/skills/ookami-coding-style-web
Command: npx skills add https://github.com/ookamiinc/guides --skill ookami-coding-style-web

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Ensures frontend code is consistent and maintainable by codifying conventions for JavaScript, JSX, SCSS, React components, hooks, selectors, containers, and frontend tests, reducing cognitive load during reviews and onboarding.

Core Features & Use Cases

  • Use American English, ES2015+ and JSX; follow Airbnb JavaScript and React style guides.
  • Use CSS Modules and SCSS; follow stylelint-config-standard; format with Prettier.
  • Enforce directory and testing conventions for components, containers, hooks, and selectors; assist in code reviews and onboarding.

Quick Start

Apply these conventions to a new React component by naming files properly, structuring directories as described, and formatting code with Prettier.

Frequently Asked Questions about ookami-coding-style-web

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enforce consistent React coding style across my web frontend projects?▼

Enforce consistent React coding style by codifying frontend conventions for JavaScript, JSX, and SCSS. This standardizes web apps using ES2015+, CSS Modules, Prettier formatting, and atomic design structure to reduce cognitive load during code reviews.

What frontend coding conventions should I follow for React components and hooks?▼

Follow Airbnb JavaScript and React style guides for React components and hooks. Use American English, ES2015+ syntax, CSS Modules with SCSS, and enforce consistent directory and file naming conventions across your web frontend.

Can I use Prettier and CSS Modules to standardize my React project structure?▼

Yes, you can use Prettier and CSS Modules to standardize React project structure. Apply Prettier for code formatting, stylelint-config-standard for SCSS, and organize components, containers, hooks, and selectors using atomic design directory conventions.

What's the best way to structure React web apps using atomic design and CSS Modules?▼

Structure React web apps by organizing components, containers, hooks, and selectors into atomic design directories. Combine this with CSS Modules for SCSS styling and consistent file naming to maintain a standardized, maintainable frontend codebase.

Does this coding style guide support frontend tests and JavaScript ES2015+?▼

Yes, this coding style guide supports frontend tests and JavaScript ES2015+. It codifies testing conventions for components and hooks while enforcing ES2015+ usage alongside Airbnb style guides for maintainable web frontend development.

Related Skills

Explore More Software Engineering Skills→
bryanvillamilpragmabryanvillamilpragma
3

eslint-prettier-config

Set up ESLint and Prettier configurations for TypeScript and React projects.

Community
Advanced
kangmominkangmomin
1

unit-test

Generate and run unit tests for changed React components, hooks, and utilities.

Community
Advanced
ehtbantonehtbanton

stylelint-config-generator

Generate Stylelint configuration files for CSS/SCSS linting and formatting.

Community
Basic
y1feng200156y1feng200156
33

lint-js

Check JavaScript and TypeScript code quality with ESLint and apply auto-fixes.

Community
Intermediate