Suzanne Rozier suzubara

Agent Instructions

Personal AI assistant configuration for Suzanne Rozier.

Communication Style

Be concise and casual: Skip formalities, get to the point
Visual formatting: Use markdown formatting, bullet points, tables, and mermaid diagrams liberally—make content scannable

JS/Node dependency management

This document describes methodology & tips for keeping our JS dependencies up-to-date. It assumes we are using classic yarn over npm.

Using an automated tool such as Dependabot or Renovatebot can help streamline updates, but there is no substitute for having a reasonable understanding of what our dependencies are, and why we have them.

Dependency resolution & lockfile

First of all, it's useful to know the syntax of the package.json¹ and yarn.lock files. Understanding how to read these can be extremely helpful when trying to determine what version of a dependency is being installed, and to debug potential issues.

How to add icons

Even though we're using USWDS in this project, there are not actually many icons included by default. Therefore, we've set up react-fontawesome in order to be able to easily include icons from Font Awesome. Specifically, we are using the library implementation described here.

Available Icons

To view icons we have already added, you can view the Basics > Icons page in Storybook.

Adding New Icons

Frontend Architecture

Directory Structure

All of the frontend (browser) code is located in /src. Here is a brief outline of the directories & how the code is organized:

/src/components - Low-level React Components that are more about rendering UI than handling application logic, and should typically not be connected to providers directly. Aim for abstract, generic components that can be shared across the application easily, and will usually have corresponding stories files for viewing in Storybook.
/src/config - High-level configuration definitions relevant to the whole application (such as routes).

Keybase proof

I hereby claim:

I am suzubara on github.
I am suzubara (https://keybase.io/suzubara) on keybase.
I have a public key whose fingerprint is F176 DC9C 148D 7609 2125 5A74 6DED 6CDF EF73 06C4

To claim this, I am signing this object:

	import React, { useRef, useState } from 'react'
	import ReactDOM from 'react-dom'
	import {
	Button,
	Modal,
	connectModal,
	ConnectedModalProps,
	useModal,
	} from '@trussworks/react-uswds'

	import React from 'react';
	import PropTypes from 'prop-types';
	import { Formik } from 'formik';
	import { TextInput, Label } from '@trussworks/react-uswds';

	import ConnectedWizardPage from 'shared/WizardPage';

	const NewStep = (props) => {
	const { title, description, pageList, pageKey } = props;

	import React from 'react'
	import { Button, Modal, useModal } from '@trussworks/react-uswds'

	import { useGenerator } from '../../containers/customHooks'
	import { confirmationModalFlow } from '../../containers/generators'

	const ConfirmCloseInvestigationModal = ({
	isOpen,
	onClose,
	onConfirm,

	import React from 'react'
	import { Button, Modal } from '@trussworks/react-uswds'

	import { connectModal,
	ModalProps,
	} from './useModal'

	interface ConfirmCloseInvestigationModalProps extends ModalProps {
	casefileNumber: string
	onConfirm?: () => void

	<!DOCTYPE html>
	<html>
	<head>

	<!-- THIS IS CSS! EDIT AT YOUR OWN RISK! -->
	<style type="text/css">

	header {
	border:2px solid #000;
	margin-bottom:20px;