writing-code-style-guide

Provides Web development coding style guidelines for JavaScript, TypeScript, Tailwind CSS, and React Intl.

11|15|Updated Dec 6, 2024
One-click install
npx skills add https://github.com/SonarSource/sonarqube-webapp --skill writing-code-style-guide
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: writing-code-style-guide
Source: https://github.com/SonarSource/sonarqube-webapp/tree/main/.claude/skills/writing-code-style-guide
Command: npx skills add https://github.com/SonarSource/sonarqube-webapp --skill writing-code-style-guide

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill provides clear guidelines and best practices for writing clean, maintainable, and consistent code, ensuring adherence to project standards.

Core Features & Use Cases

  • Coding Standards: Details preferred JavaScript/TypeScript patterns, including avoiding default exports and using meaningful names.
  • Styling Guidance: Explains the use of Emotion.js alongside Tailwind CSS.
  • Localization Best Practices: Outlines how to handle text for internationalization, emphasizing the use of React Intl for efficient and maintainable translations.
  • Use Case: A new developer joins the team and needs to understand the project's specific coding conventions before starting their first task.

Quick Start

Consult the writing-code-style-guide skill for information on how to properly format code.

Frequently Asked Questions about writing-code-style-guide

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

FAQPage Schema
What are the best practices for JavaScript and TypeScript code style conventions?

JavaScript and TypeScript code style best practices include avoiding default exports and using meaningful names to ensure consistent code quality and maintainability across your application development project.

How do I handle frontend styling with Emotion.js and Tailwind CSS?

To handle frontend styling, use Emotion.js alongside Tailwind CSS. This combination provides clear styling guidance to enforce consistent code quality and maintainability across your application's user interface components.

What is the best way to manage localization and internationalization in a React application?

The best way to manage application localization is using React Intl. This approach emphasizes efficient and maintainable translations, providing clear guidelines for handling text and internationalization strategies in your project.

How do I write clean and maintainable code for a new frontend development project?

To write clean and maintainable code, follow comprehensive coding standards that detail preferred JavaScript and TypeScript patterns, styling guidance, and localization best practices to ensure adherence to project standards.

Why should I avoid default exports in my TypeScript application development?

You should avoid default exports in TypeScript to maintain consistent code style and quality. Using meaningful names and specific export patterns ensures better maintainability and clarity across your application development project.