sergiodxa/agent-skills
11 skills6.6k installs1k starsGitHub
Install
npx skills add https://github.com/sergiodxa/agent-skillsSkills in this repo
1Frontend Testing Best PracticesGuidelines for writing effective maintainable tests that provide real confidence Contains 6 rules focused on preferring E2E tests minimizing mocking and testing behavior over implementation 1 Prefer E2E tests over unit tests Test the whole system not isolated pieces 2 Minimize mocking If you need complex mocks write an E2E test instead 3 Test behavior not implementation Test what users see and do 4 Avoid testing React components directly Test them through E2E Deciding what type of test to write Writing new E2E or unit tests Reviewing test code Refactoring tests prefer e2e tests rules prefer e2e tests md Default to E2E tests Only write unit tests for pure functions The frontend testing best practices agent skill provides documented workflows prerequisites triggers and safety guidance from its SKILL md source Agents load it when user requests match the description and follow step by step instructions without inventing capabilities It integrates with standard agent tooling for the tasks inputs outputs and failure modes described in the repository documentation1.9kinstalls2Owasp Security CheckThe owasp-security-check skill provides comprehensive security audit patterns for web applications and REST APIs with twenty rules across five categories covering OWASP Top 10 and common web vulnerabilities. Apply when auditing codebases, reviewing auth implementations, evaluating API security, assessing data protection, checking deployment configuration, or before production deploys. Workflow identifies application type as web app, REST API, SPA, SSR, or mixed, scans CRITICAL rules first then HIGH and MEDIUM, loads specific rules from the rules directory, and reports severity with file location, impact, and remediation code examples. CRITICAL categories include Authentication and Authorization with broken-access-control and authentication-failures, Data Protection with cryptographic-failures and sensitive-data-exposure, and Input/Output Security. HIGH covers Configuration and Headers; MEDIUM covers API and Monitoring. Example fixes show IDOR prevention with session ownership checks, bcrypt instead of MD5 password hashing, and strong password validation requiring twelve characters with mixed character classes. Findings format lists Severity, Category, File, Issue, Impact, and Fix.1.3kinstalls3Frontend React Best Practicesfrontend-react-best-practices is a React performance optimization skill containing 33 rules across 6 categories focused on reducing re-renders, optimizing bundles, component composition, and avoiding common React pitfalls. Developers reach for it when writing new components, reviewing performance issues, or refactoring existing React code involving hooks, memoization, or bundle size. Triggers include tasks mentioning React components, hooks, memoization, or bundle optimization. The guidelines emphasize practical composition and rendering patterns rather than generic JavaScript style advice.1kinstalls4Frontend Accessibility Best Practicesfrontend-accessibility-best-practices is a sergiodxa/agent-skills reference for building inclusive React applications with WCAG-minded patterns. It organizes seven rules across four categories—semantic HTML landmarks, screen reader support with sr-only text and aria-live regions, keyboard and focus management including react-aria Modal trapping, and user preference handling for reduced motion and 44x44px touch targets. Each rule links to a dedicated markdown reference with bad versus good TSX examples using semantic elements, role="alert", focus-visible rings, and motion-reduce utilities. Developers reach for frontend-accessibility-best-practices when creating components, forms, navigation, dynamic notifications, or reviewing UI pull requests for screen-reader and keyboard compliance.503installs5Frontend Tailwind Best Practicesfrontend-tailwind-best-practices in sergiodxa/agent-skills packages 10 Tailwind CSS rules for layout utilities, color schemes, className handling, affordances, and responsive design. Agents replace raw flex classes with custom v-stack, h-stack, z-stack, center, spacer, and circle utilities; prefer parent gap-* over child margins; switch stack direction at breakpoints; merge classNames with cn(); and use class-based dark variants. Rules cover responsive text scaling, pointer-coarse touch targets, ClassNameRecord types for multi-element components, and ui-button affordance classes. Impact labels mark layout-stack-utilities and color-schemes as CRITICAL priorities during code reviews. Anti-patterns explicitly ban flex flex-col, inline styles for responsive behavior, and hard-coded hex colors without design tokens. Developers reach for this skill when writing component styles, building responsive layouts, or refactoring className props in Tailwind frontends. Key files referenced include tailwind.config.js, global.css variables, tailwind.css utilities, and app/utils/cn.ts.425installs6Frontend React Router Best Practicesfrontend-react-router-best-practices is a sergiodxa/agent-skills reference packing 55 rules across 11 categories for React Router applications. Rules span data loading (parallel Promise.all fetches, request caching, colocated queries), actions and Zod validation, form pending states, middleware (session, CORS, safe redirects), streaming with Single Fetch, and route auth patterns. Each rule includes BAD/GOOD TypeScript examples—loaders replace useEffect fetches, actions handle mutations, and middleware guards secure routes. Invoke when writing new routes, refactoring data waterfalls, implementing form mutations, or organizing nested layouts. The skill triggers on tasks mentioning React Router loaders, actions, Form components, or route file structure.356installs7Frontend Js Best PracticesFrontend JavaScript best practices skill for shipping interactive web UIs. Covers structure, events, async flows, performance, and defensive coding so SaaS, extension, and mobile-web frontends stay readable, fast, and easy for agents to extend safely.288installs8Ruby On Rails Best PracticesGuides agents through Ruby on Rails backend development using framework conventions, solid ActiveRecord usage, clean controllers, and maintainable service patterns for production SaaS and API apps.241installs9Frontend Async Best Practicesfrontend-async-best-practices from sergiodxa/agent-skills teaches reliable async UI patterns: data fetching, loading and error states, suspense, and race-safe updates for React and modern frontends.199installs10Frontend Internationalization Best PracticesBest practices for frontend internationalization: namespace organization, lazy-loaded locales, ICU-style plurals, RTL layouts, SEO-friendly hreflang, and testing translated strings without layout breakage across markets.173installs11Skill Writing Best PracticesSkill-writing best practices for creating high-quality agent skills. Teaches trigger design, SKILL.md structure, progressive disclosure, executable workflows, and review habits so custom skills are reliable, discoverable, and safe for production agent use.161installs