Orange-OpenSource / Orange-OpenSource/ouds-flutter

In `library`, add component `skeleton`

Open
#867 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

⚛️ component 📖 documentation 📱 demo app 🧰 library
Dominant language
Dart
Stars
10
Forks
5
Avg merge
6d 8h
Merged PRs (30d)
9

Description

Description

As a user of the Ouds library
I want to be able to use the component
So that I can add this Ouds component in my own projects

As a user of the library
I want to be able to use the component
So that I have access to the documentation on how to use it

As a user of the Demo App
I want to access the Component
So that I can understand how to use it:

  • while using the demo app I can interact with the available options and observe the changes on the component itself
  • I can see the code associated to the component customization
  • I can copy and paste the code from the app based on the selected customization
  • or when looking into the code of the app itself, I would also understand how to use it

Specifications

See Figma Skeleton specifications

Definition of Ready

  • Need to update Figma with these specifications coming from dev/design meeting (10.09.2026):
    - Shimmer effect must be applied on whole screen from left to right on mobile.
    - All shapes must be allowed

Definition of Done

  • Add component skeleton (API, doc, demo app) with shimmer effect and circle shape
  • Add component skeleton (API, doc, demo app) with shimmer effect and capsule shape
  • Add component skeleton (API, doc, demo app) with shimmer effect and rectangle shape with square corners
  • Add component skeleton (API, doc, demo app) with shimmer effect and rectangle shape with rounded corners
  • Add component skeleton (API, doc, demo app) with shimmer effect and square shape
  • Add snapshots tests for skeleton

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the Figma Skeleton specifications and the existing library component and Demo App patterns. Implement the skeleton API, documentation, demo customizations, shimmer variants and listed shapes, then add snapshot tests. Done means all five shape variants are available across the API, documentation and demo app with snapshot coverage.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
design, documentation, mobile, testing
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.