Leaderboard/Software Engineering/skills
Last commit on April 30, 2026·Created on January 1, 2026

suleimanodetoro/skills

A framework for implementing deliberate product interfaces and coherent design systems
Combined rank
#386
across all skills
In Software Engineering
#29
category rank
Stars
793
-5.6% in last 7d
Forks
11
-15.4% in last 7d
Watchers
6
0.0% in last 7d
Traction scoreGitHub stars can be faked, so popularity alone can be misleading. Traction Score looks for broader signs of recent attention, adoption, and active maintenance.
TL;DR

This skill provides a structured approach to designing and implementing product interfaces within existing codebases or new prototypes. It focuses on creating intentional visual hierarchies and responsive states for pages, dashboards, and mobile-shaped web experiences.

Frontend engineers can use these guidelines to refine interaction design, manage empty and loading states, and ensure that UI components remain polished and coherent across a design system.

WHO IT'S FOR
Frontend engineers
building production React web applications
Mobile app developers
shipping React Native apps for iOS and Android
Product designers
implementing deliberate and polished product interfaces
Full-stack developers
prototyping cross-platform web and mobile experiences
Repository contents

8 skill files

Compatible AgentsThe repository documents support for these agents. The skills may also work with other agents that can load SKILL.md files, but they may need some setup or small changes.

Use this skill collection

Follow the documented setup, then try a first task.

Install the complete skills bundle

Installs: Complete suleimanodetoro/skills collection covering interface design, React, React Native, and security build and review skills.

  1. Run this command in a terminal to add the repository's skills bundle.

    npx skills@latest add suleimanodetoro/skills
README.md · Checked Sep 18, 2026

Give it something to do.

Suggested first task

Run a quick interface review

Uses review-interface

  • A screen or flow to review
  • A source path or preview URL
Use the review-interface skill in quick mode to review the primary path of [screen or flow]. Inspect [source path or preview URL], report only evidence-backed high- and medium-impact findings, cap the review at five findings, and do not implement fixes. Clearly state any screens or states you could not inspect.
README.md · Checked Sep 18, 2026skills/review-interface/SKILL.md · Checked Sep 18, 2026
Suggested first task

Review a React component for reachable failures

Uses review-react

  • A React component, hook, diff, or route path
  • Relevant repository context
Use the review-react skill to perform a read-only review of [component, hook, diff, or route path]. Examine enough call sites, types, and tests to substantiate findings, prioritize user-visible correctness and React rule violations, and report only demonstrated issues without implementing fixes.
skills/review-react/SKILL.md · Checked Sep 18, 2026README.md · Checked Sep 18, 2026
Suggested first task

Review one change for material security risks

Uses review-security

  • A specific change, branch, file set, feature, or architecture to review
  • Relevant repository evidence
Use the review-security skill to conduct a read-only security review of [change, branch, files, feature, or architecture]. Report only reachable, material risks supported by a concrete influence, path, control failure, impact, and scope; omit speculative candidates and do not implement fixes or run intrusive tests.
skills/review-security/SKILL.md · Checked Sep 18, 2026README.md · Checked Sep 18, 2026